解决react+antd table行内编辑的常见问题

使用React和Ant Design Table组件构建表格时，实现行内编辑功能可能会遇到一个问题：点击一行后，表格中所有行的编辑框都显示出来。 本文提供解决方案，确保仅编辑被点击的行。

Ant Design Table的行内编辑属性

Ant Design Table 提供了 editable 和 onEdit 两个关键属性来实现行内编辑：

• editable: 控制表格是否可编辑，默认为 false。
• onEdit: 当行进入编辑模式时触发的回调函数，接收事件对象作为参数。

实现单行编辑的步骤

为了只编辑被点击的行，请按照以下步骤操作：

1. 设置 editable 属性为 false: 确保表格默认情况下不可编辑。

2. 在 onEdit 回调函数中进行判断: 在 onEdit 函数中，检查事件对象 (event) 以确定点击的是哪一行。 通过比较事件目标 (event.target) 的 ID 或其他唯一标识符与当前行数据，来判断是否允许编辑。只有匹配时才允许编辑该行。

3. 在输入框的 onChange 事件中更新数据: 在编辑框的 onChange 事件处理函数中，使用事件对象作为参数，更新表格中对应行的数据。

通过以上步骤，您可以确保每次只编辑被点击的那一行。 请根据您的具体代码和数据结构调整 onEdit 和 onChange 函数中的逻辑。 记住，需要正确地识别和处理每一行的唯一标识符。