是否向Antd表添加可编辑的行？

import React, { useState } from 'react';
import { Table, Input, Select } from 'antd';

const EditableTable = () => {
  const [dataSource, setDataSource] = useState([
    { id: 1, name: 'John', age: 25 },
    { id: 2, name: 'Jane', age: 30 },
  ]);

  const [editingId, setEditingId] = useState('');

  const handleEdit = (record) => {
    setEditingId(record.id);
  };

  const handleSave = (record) => {
    // 保存编辑后的数据
    setEditingId('');
  };

  const columns = [
    { title: 'ID', dataIndex: 'id' },
    {
      title: 'Name',
      dataIndex: 'name',
      editable: true, // 设置可编辑
      render: (text, record) =>
        editingId === record.id ? (
          <Input value={text} onChange={(e) => handleInputChange(e, record)} />
        ) : (
          text
        ),
    },
    {
      title: 'Age',
      dataIndex: 'age',
      editable: true, // 设置可编辑
      render: (text, record) =>
        editingId === record.id ? (
          <Select value={text} onChange={(value) => handleSelectChange(value, record)}>
            <Select.Option value="25">25</Select.Option>
            <Select.Option value="30">30</Select.Option>
            <Select.Option value="35">35</Select.Option>
          </Select>
        ) : (
          text
        ),
    },
    {
      title: 'Operation',
      render: (_, record) => {
        const isEditing = editingId === record.id;
        return isEditing ? (
          <a onClick={() => handleSave(record)}>Save</a>
        ) : (
          <a onClick={() => handleEdit(record)}>Edit</a>
        );
      },
    },
  ];

  const handleInputChange = (e, record) => {
    const { value } = e.target;
    setDataSource((prevDataSource) =>
      prevDataSource.map((item) =>
        item.id === record.id ? { ...item, name: value } : item
      )
    );
  };

  const handleSelectChange = (value, record) => {
    setDataSource((prevDataSource) =>
      prevDataSource.map((item) =>
        item.id === record.id ? { ...item, age: value } : item
      )
    );
  };

  return <Table dataSource={dataSource} columns={columns} />;
};

export default EditableTable;