React 实现table内单元格可编辑

Ant Design中给出了实现的办法，但个人觉得有点略微复杂，且在函数组件中似乎还要改写这部分。所以自己实现了一下这个功能，用于函数组件中。
示例：

const ConfigRule = React.forwardRef(({ getFieldDecorator }, ref) => {
const [dataSource, setDataSource] = useState([]);

const columns = [
    {
      title: '序号',
      dataIndex: 'key',
      key: 'key',
      width: 50,
    },
    {
      title: '数据源',
      dataIndex: 'source',
      key: 'source',
      width: 150,
    },
    {
      title: '源数据表名',
      dataIndex: 'table_name_sr',
      key: 'table_name_sr',
      width: 300,
      textWrap: 'word-break',
      ellipsis: true, // 处理表头宽度不生效
    },
    {
      title: '目标数据表名',
      dataIndex: 'table_name_tr',
      key: 'table_name_tr',
      width: 300,
      textWrap: 'word-break',
      ellipsis: true, // 处理表头宽度不生效
      render: (text, record) => (
        <Item>
          {
              getFieldDecorator(`targetName.${record.key}`, {// 保证每个元素是唯一
                initialValue: text, //之前试过不用getFieldDecorator在外面包着，而是只用input,发现给input设defaultValue,改变table中的数据，input的值不能重新渲染，显示的还是defaultValue；然后又使用value,发现input框里面的值直接无法改变，所以才用了getFieldDecorator。
              })(
                <Input
                  onPressEnter={e => saveRow(e, record)}
                  onBlur={e => saveRow(e, record)}
                />
              )
            }
        </Item>
      ),
    }
  ];
});

// 保存输入框中的值
function saveRow(e, record) {
  const newData = [...dataSource];
  const index = dataSource.findIndex(item => record.key === item.key);
  newData[index].table_name_tr = e.target.value;
  setDataSource(newData);
}

return (
     <ProTable
        className="mytable"
        columns={columns}
        dataSource={dataSource}
        rowKey="table_name_sr"
        scroll={{ x: 1400 }}
        pagination={{
          pageSizeOptions: ['10', '20', '50', '100'],
          showLessItems: true,
          showQuickJumper: true,
          showSizeChanger: true,
        }}
      />
 )
}
export default ConfigRule;

参考：https://blog.csdn.net/weixin_44471622/article/details/105140287