react动态添加一行，实现删除，新增，编辑

js部分

import { useEffect, useState, useMemo, useCallback, useRef } from "react";
import {
  Form,
  Input,
  Button,
  Table,
  Checkbox,
  Select,
  Popconfirm,
  message,
  Modal,
  TreeSelect,
} from "antd";
import styles from "./index.less";
const Editable = (props) => {
  const [dataSource, setDataSource] = useState([]);
  const [visible, setVisible] = useState(false);
  const [buttonIsAbled, setButtonIsAbled] = useState(true);
  const [checked, setChecked] = useState(false);
  const [treeValue, setTreeValue] = useState("parent 1");
  const id = new Date().getTime();
  // 点击新增一行
  const handleRowAdd = useCallback(() => {
    let newData = [
      {
        key: id,//唯一的key
        fieldDecimal: "",
        fieldLength: "",
        fieldNameCn: "",
        fieldNameEn: "",
        fieldType: 1,
        required: false,
      },
    ];
    setDataSource([...dataSource, ...newData]);
  }, [dataSource, checked]);

  // 保存
  const save = useCallback(() => {
    //处理校验值
    props.form.validateFields((err, values) => {
      if (!err) {
       // values.tableDt就是个表格数据的数组，可对获取的值进行处理校验处理
      console.log(values.tableDt, "values.tableDt");
     }
    return;
  }, [checked]);
  // 取消
  const cancle = () => {};
  // 删除
  const confirm = useCallback(
    (index) => {
      let tableDt = props.form.getFieldValue("tableDt");
      let dataList = tableDt
        .map((element, i) => {
          return { ...dataSource, ...element, key: id + Math.random(100) };
        })
        .filter((key, i) => i !== index);
      setDataSource(dataList);

      props.form.setFieldsValue({
        tableDt: tableDt.filter((key, i) => i !== index),
      });
      message.success("删除成功");
      console.log(tableDt, "d");
    },
    [dataSource]
  );
  const handleOk = useCallback(
    (e) => {
      setVisible(false);
    },
    [visible]
  );
  const handleCancel = useCallback(
    (e) => {
      setVisible(false);
    },
    [visible]
  );
  const columns = [
    {
      title: "名称1",
      dataIndex: "fieldNameCn",
      align: "center",
      render: (text, record, index) => (
        <Form.Item key={record.key}>
          {props.form.getFieldDecorator(`tableDt[${index}].fieldNameCn`, {
            initialValue: record.fieldNameCn,
            rules: [
              {
                required: true,
                message: "必填项",
              },
            ],
          })(<Input key={index} placeholder="请输入名称2" />)}
        </Form.Item>
      ),
    },
    {
      title: "名称2",
      align: "center",
      dataIndex: "fieldNameEn",
      render: (text, record, index) => (
        <Form.Item>
          {props.form.getFieldDecorator(`tableDt[${index}].fieldNameEn`, {
            initialValue: record.fieldNameEn,
            rules: [
              {
                required: true,
                message: "必填项",
              },
            ],
          })(<Input placeholder="请输入名称2" />)}
        </Form.Item>
      ),
    },
    {
      title: "名称3",
      align: "center",
      dataIndex: "fieldType",
      render: (text, record, index) => (
        <Form.Item>
          {props.form.getFieldDecorator(`tableDt[${index}].fieldType`, {
            initialValue: record.fieldType,
            rules: [
              {
                required: true,
                message: "必填项",
              },
            ],
          })(<EnumSelect enums={fieldTypeEnum} />)}
        </Form.Item>
      ),
    },
    {
      title: "名称4",
      align: "center",
      dataIndex: "fieldLength",
      render: (text, record, index) => (
        <Form.Item>
          {props.form.getFieldDecorator(`tableDt[${index}].fieldLength`, {
            initialValue: record.fieldLength,
            rules: [
              {
                required: true,
                message: "必填项",
              },
            ],
          })(<Input placeholder="请输入名称2" />)}
        </Form.Item>
      ),
    },
    {
      title: "名称5",
      align: "center",
      width: 200,
      dataIndex: "fieldDecimal",
      render: (text, record, index) => (
        <Form.Item>
          {props.form.getFieldDecorator(`tableDt[${index}].fieldDecimal`, {
            initialValue: record.fieldDecimal,
            rules: [
              {
                required: true,
                message: "必填项",
              },
            ],
          })(<Input placeholder="请输入名称2" />)}
        </Form.Item>
      ),
    },
    {
      title: "是否必填",
      align: "center",
      dataIndex: "requir",
      render: (text, record, index) => (
        <Form.Item>
          {props.form.getFieldDecorator(`tableDt[${index}].requir`, {
            valuePropName: "checked",
            initialValue: record.requir,
          })(<Checkbox></Checkbox>)}
        </Form.Item>
      ),
    },
    {
      title: "操作",
      align: "center",
      render: (text, record, index) => (
        <Popconfirm
          title="确定要删除吗?"
          onConfirm={() => confirm(index)}
          okText="Yes"
          cancelText="No"
        >
          <a href="#">删除</a>
        </Popconfirm>
      ),
    },
  ];
  return (
    <div>
    
      <Form>
        <Table
          columns={columns}
          dataSource={dataSource}
          pagination={false}
          bordered
          rowKey={(record) => record.key}
        />
        <a onClick={handleRowAdd} type="link" className={styles.addBtn}>
          添加一行
        </a>
      </Form>
      <div className={styles.bottomBtn}>
        <Button onClick={cancle} style={{ marginRight: "10px" }}>
          取消
        </Button>
        <Button onClick={save} type="primary">
          保存
        </Button>
      </div>
    </div>
  );
};
export default Form.create()(Editable);

css部分

.addBtn{
    display: inline-block;
    border: 1px solid #e8e8e8;
    height: 50px;
    width: 100%;
    text-align: center;
    font-size: 18px;
    line-height: 50px;
    border-top: none;
  }
   .editable-cell {
        position: relative;
      }
      
      .editable-cell-value-wrap {
        padding: 5px 12px;
        cursor: pointer;
      }
      
      .editable-row:hover .editable-cell-value-wrap {
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        padding: 4px 11px;
      }
    .abledBtn{
      pointer-events:none
    }
    .mainModal{
      display: flex;
      justify-content: space-around;
      >div:nth-child(1){
        margin-right: 5px;
              display:flex;
              flex-direction: column;
              border: 1px solid rgb(196, 194, 194);
              padding: 10px;
              Button{
                width:120px;
              }
              p {
                margin-top: 10px;
              }
      }
      >div:nth-child(2){
        
              display:flex;
              flex-direction: column;
              border: 1px solid rgb(196, 194, 194);
              padding: 10px;
              Button{
                width:120px;
              }
              p {
                margin-top: 10px;
              }
      }
    }
    .bottomBtn{
      display: flex;
      margin-top: 20px;
      justify-content: flex-end;
    }