antd Input.TextArea嵌入表格里如何修改数据

如果您想要在 Ant Design 的表格中嵌入一个 Input.TextArea 组件，并且想要修改表格数据，可以采取以下步骤：

1. 在表格中渲染 Input.TextArea 组件，并将其绑定到表格数据中的对应字段。

2. 在 Input.TextArea 组件中设置 onChange 事件，当输入框的值发生变化时，更新对应字段的值。

3. 在表格的 onSave 回调函数中，将更新后的表格数据提交到服务器。

下面是一个示例代码片段，展示了如何在 Ant Design 的表格中使用 Input.TextArea 组件：

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

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Description',
    dataIndex: 'description',
    key: 'description',
    render: (text, record) => (
      <Input.TextArea value={text} onChange={(e) => handleDescriptionChange(e, record)} />
    ),
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    description: 'A developer from London',
  },
  {
    key: '2',
    name: 'Jim Green',
    description: 'A designer from New York',
  },
];

const EditableTable = () => {
  const [tableData, setTableData] = useState(data);

  const handleDescriptionChange = (e, record) => {
    const { value } = e.target;
    const newData = [...tableData];
    const index = newData.findIndex((item) => record.key === item.key);
    if (index > -1) {
      newData[index].description = value;
      setTableData(newData);
    }
  };

  const handleSave = async () => {
    // TODO: 将修改后的表格数据提交到服务器
    console.log(tableData);
  };

  return <Table columns={columns} dataSource={tableData} onSave={handleSave} />;
};

export default EditableTable;

在这个示例代码中，我们在表格的“Description”列中渲染了一个 Input.TextArea 组件，并将其绑定到表格数据中的“description”字段。当输入框的值发生变化时，我们在 onChange 事件中更新了对应字段的值。在 onSave 回调函数中，我们可以将修改后的表格数据提交到服务器。

注意，这只是一个示例代码，您需要根据您的具体业务需求来修改代码。