React + Ant Design：让表格可增删改，打造动态数据交互

2024-01-30 20:33:57

React + Ant Design：打造可增删改的表格#

前言

React和Ant Design是前端开发中常用的两个框架，它们结合起来可以轻松创建具有丰富功能的web应用程序。在本篇文章中，我们将介绍如何使用React和Ant Design来构建一个可增删改的表格，从而实现数据的便捷管理。

实现步骤

安装依赖项

npm install react-antd

创建React项目

npx create-react-app react-antd-table

在src目录下创建Table.js文件，并添加以下代码：

import React, { useState } from "react";
import { Table, Button, Input, Modal, Form } from "antd";

const Table = () => {
  const [data, setData] = useState([]);
  const [visible, setVisible] = useState(false);
  const [formData, setFormData] = useState({});

  const columns = [
    { title: "Name", dataIndex: "name" },
    { title: "Age", dataIndex: "age" },
    {
      title: "Action",
      dataIndex: "action",
      render: (text, record) => (
        <>
          <Button type="primary" onClick={() => editRecord(record)}>
            Edit
          </Button>
          <Button type="danger" onClick={() => deleteRecord(record)}>
            Delete
          </Button>
        </>
      ),
    },
  ];

  const editRecord = (record) => {
    setVisible(true);
    setFormData(record);
  };

  const deleteRecord = (record) => {
    const newData = data.filter((item) => item.key !== record.key);
    setData(newData);
  };

  const handleCancel = () => {
    setVisible(false);
  };

  const handleOk = () => {
    const newData = [...data];
    const index = newData.findIndex((item) => item.key === formData.key);
    newData[index] = formData;
    setData(newData);
    setVisible(false);
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  return (
    <>
      <Button type="primary" onClick={() => setVisible(true)}>
        Add New
      </Button>
      <Table columns={columns} dataSource={data} />
      <Modal
        title="Edit Record"
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 14 }}
          initialValues={formData}
          onValuesChange={handleChange}
        >
          <Form.Item label="Name" name="name">
            <Input />
          </Form.Item>
          <Form.Item label="Age" name="age">
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default Table;

在src/index.js文件中，导入Table组件并渲染它

import React from "react";
import ReactDOM from "react-dom";
import Table from "./Table";

ReactDOM.render(<Table />, document.getElementById("root"));