React、Antd、动态添加或删除一条表单数据

简化的代码如下：

import { Button, Table, Form, Input, Popover } from "antd";
import { InfoCircleFilled } from "@ant-design/icons";
import "./app.css";

export default function App() {
  const [form] = Form.useForm();
  const [dataSource, setDataSource] = useState([]);
  const [openIndex, setOpenIndex] = useState(null);
  const [open, setOpen] = useState(false);

  const columns = [
    {
      title: "姓名",
      render: (record, _, index) => (
        <Form.Item name={["personal", index, "name"]}>
          <Input />
        </Form.Item>
      ),
    },
    {
      title: "性别",
      render: (record, _, index) => (
        <Form.Item name={["personal", index, "sex"]}>
          <Input />
        </Form.Item>
      ),
    },
    {
      title: "职业",
      render: (record, _, index) => (
        <Form.Item name={["personal", index, "career"]}>
          <Input />
        </Form.Item>
      ),
    },
    {
      title: "操作",
      render: (record, _, index) => (
        <Popover
          open={open && index === openIndex}
          onOpenChange={(e) => {
            setOpen(e);
            setOpenIndex(index);
          }}
          trigger="click"
          placement="bottomRight"
          content={
            <div>
              <div>
                <InfoCircleFilled style={{ fontSize: 24, color: "#f6cf47" }} />
              </div>
              <div style={{ fontWeight: 600, marginLeft: 8 }}>
                确定要删除此条记录吗？
              </div>
              <div>
                <Button
                  type="primary"
                  onClick={() => {
                    setOpen(false);
                    setOpenIndex(null);
                    const data = dataSource.filter((i, j) => j !== index);
                    setDataSource(data);
                    form.setFieldsValue({
                      personal: form
                        .getFieldsValue()
                        .personal.filter((i, j) => j !== index),
                    });
                  }}
                >
                  确认
                </Button>
                <Button
                  onClick={() => {
                    setOpen(false);
                    setOpenIndex(null);
                  }}
                >
                  取消
                </Button>
              </div>
            </div>
          }
        >
          <a>删除</a>
        </Popover>
      ),
    },
  ];

  return (
    <div>
      <Button
        type="primary"
        style={{ marginBottom: 20 }}
        onClick={() => {
          setDataSource([
            ...dataSource,
            {
              name: "",
            },
          ]);
        }}
      >
        添加一条
      </Button>

      <Form form={form}>
        <Table
          sticky
          bordered
          columns={columns}
          dataSource={dataSource}
          pagination={false}
        />
      </Form>
    </div>
  );
}

效果图：

了解点

• 用了Form表单包裹Table组件，保存的时候可以通过form.getFieldsValue()拿到全部数据；
• 删除时加了个气泡卡片，点击确认才删除；
• 添加数据时需要追加个name:''属性；

最后

一个很简单demo，也是第一次发表文章，可以多多交流咯~