如何使用Antd Table实现带可编辑颜色列的玩具信息表格

• 先将你现有的toys对象转换为Antd Table要求的数组类型数据源，给每一行加唯一key：

const toys = {
    "Truck": "Black",
    "Bike": "White",
    "Car": "Blue",
    "Bicycle": "Black"
}
// 转换为适配Table的数组
const initData = Object.entries(toys).map(([name, color], index) => ({
  key: index,
  name,
  color
}))

• 配置表格列，第二列直接渲染Input组件，绑定值并同步修改数据源，完整组件代码如下：

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

const ToyTable = () => {
  const [dataSource, setDataSource] = useState(initData);

  const columns = [
    {
      title: '玩具名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '颜色',
      dataIndex: 'color',
      key: 'color',
      render: (text, record) => (
        <Input
          value={text}
          onChange={(e) => {
            const newData = [...dataSource];
            const targetRow = newData.find(item => item.key === record.key);
            if (targetRow) {
              targetRow.color = e.target.value;
              setDataSource(newData);
            }
          }}
          placeholder="请输入颜色值"
        />
      )
    }
  ];

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

export default ToyTable;

• 如果后续需要拿到修改后的所有数据，直接读取dataSource即可，也可以按需转回最初的对象格式：

// 转回原始对象结构
const modifiedToys = Object.fromEntries(dataSource.map(item => [item.name, item.color]))

内容的提问来源于stack exchange，提问作者Benk I