Ant设计表单击tabel单元格

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

const EditableCell = ({ editing, dataIndex, title, inputType, record, index, children, ...restProps }) => {
  const inputNode = inputType === 'input' ? <Input /> : null;

  return (
    <td {...restProps}>
      {editing ? (
        <Form.Item name={dataIndex} style={{ margin: 0 }}>
          {inputNode}
        </Form.Item>
      ) : (
        children
      )}
    </td>
  );
};

const MyTable = () => {
  const [form] = Form.useForm();
  const [editingKey, setEditingKey] = useState('');

  const isEditing = (record) => record.key === editingKey;

  const edit = (record) => {
    form.setFieldsValue({ ...record });
    setEditingKey(record.key);
  };

  const cancel = () => {
    setEditingKey('');
  };

  const save = async (key) => {
    try {
      const row = await form.validateFields();
      // 发送请求保存数据
      console.log(row);
      setEditingKey('');
    } catch (errInfo) {
      console.log('Validate Failed:', errInfo);
    }
  };

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      render: (text, record) => {
        const editable = isEditing(record);
        return editable ? (
          <Form.Item name="name" style={{ margin: 0 }}>
            <Input />
          </Form.Item>
        ) : (
          <div onClick={() => edit(record)}>{text}</div>
        );
      },
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
      render: (text, record) => {
        const editable = isEditing(record);
        return editable ? (
          <Form.Item name="age" style={{ margin: 0 }}>
            <Input />
          </Form.Item>
        ) : (
          <div onClick={() => edit(record)}>{text}</div>
        );
      },
    },
    {
      title: '操作',
      dataIndex: 'operation',
      render: (_, record) => {
        const editable = isEditing(record);
        return editable ? (
          <span>
            <Button type="link" onClick={() => save(record.key)}>
              保存
            </Button>
            <Button type="link" onClick={cancel}>
              取消
            </Button>
          </span>
        ) : (
          <Button type="link" onClick={() => edit(record)}>
            编辑
          </Button>
        );
      },
    },
  ];

  const data = [
    {
      key: '1',
      name: 'John',
      age: 32,
    },
    {
      key: '2',
      name: 'Jane',
      age: 28,
    },
  ];

  return (
    <Form form={form} component={false}>
      <Table
        components={{
          body: {
            cell: EditableCell,
          },
        }}
        dataSource={data}
        columns={columns}
        rowClassName="editable-row"
        pagination={false}
      />
    </Form>
  );
};

export default MyTable;