reactjs - 根据 select option 中的选定项在 antd 表中显示数据

问题描述

我需要根据从选择选项中选择的项目在antd表上显示数据。要显示的数据存储在不同的变量中。例如，如果从 select 选项中选择了学校，则数据源在 schoolData 中可用，其他选项也类似。这是我的代码：

import React, { useState } from "react";
import Framework from "../framework/Framework";
import { Dropdown, Button, Table, message, Select } from "antd";
import { DeleteOutlined, DownOutlined, EditOutlined } from "@ant-design/icons";
import { Content } from "antd/lib/layout/layout";
import AddNewButton from "../addNewButton/AddNewButton";
import "./attributes.css";
import DataSource from "./Datasource";
import IconDescription from "../icondescription/IconDescription";
import Modal from "antd/lib/modal/Modal";
import { Option } from "antd/lib/mentions";



const Attributes = () => {
    const [page, setPage] = useState(1);

    const [isModalVisible, setIsModalVisible] = useState(false)

    // const [layer, setLayer] = useState()

    const columns = [
        {
            title: "S.N",
            dataIndex: "key",
        },
        {
            title: "Name",
            dataIndex: "name",
            key: "name",
            // render: (text) => <a>{text}</a>,
        },
        {
            title: "Address",
            dataIndex: "address",
            key: "address",
        },
        {
            title: "Contact No.",
            dataIndex: "contactno",
            key: "contactno",
        },
        {
            title: "Operation",
            dataIndex: "operation",
            key: "operation",
            render: () => {
                return (
                    <div style={{ display: "flex" }}>
                        <IconDescription icon={<EditOutlined />} label="Edit" />

                        <IconDescription icon={<DeleteOutlined />} label="Delete" />
                    </div>
                );
            },
        },
    ];

    const addAttribute = () => {
        setIsModalVisible(true)
    }

    const modalHandleOk = () => {
        setIsModalVisible(false);
    };

    const modalHandleCancel = () => {
        setIsModalVisible(false);
    };

    const selectLayer = (e) => {
        console.log("select layer", e)
    }

    return (
        <Framework>
            <Content className="attributes">
                <div className="select-addNewBtn-container">

                    <Select defaultValue="school" style={{ width: 120 }} onChange={selectLayer}>
                        <Option value="school">School</Option>
                        <Option value="hospital">Hospital</Option>
                        <Option value="policeStation">Police Station</Option>
                    </Select>

                    <AddNewButton name={"Add New Attribute"} addNewBtn={addAttribute} />

                    <Modal title={"Add New Attribute"} visible={isModalVisible} centered onCancel={modalHandleCancel} onOk={modalHandleOk}>

                    </Modal>
                </div>

                <Table
                    dataSource={DataSource}
                    columns={columns}
                    className="data-table"
                    pagination={{
                        size: "small",
                        pageSize: 6,
                        hideOnSinglePage: true,
                        showSizeChanger: false,
                    }}
                />
            </Content>
        </Framework>
    );
};

export default Attributes;

我如何实现所需的功能？请让我知道。在这些事情上相当初学者。

标签： reactjsantd

reactjs - 根据 select option 中的选定项在 antd 表中显示数据

问题描述

解决方案

推荐阅读