解决react+antd table行内编辑的常见问题
使用React和Ant Design Table组件构建表格时，实现行内编辑功能可能会遇到一个问题：点击一行后，表格中所有行的编辑框都显示出来。 本文提供解决方案，确保仅编辑被点击的行。
Ant Design Table的行内编辑属性
Ant Design Table 提供了 editable 和 onEdit 两个关键属性来实现行内编辑：
-
editable: 控制表格是否可编辑，默认为false。 -
onEdit: 当行进入编辑模式时触发的回调函数，接收事件对象作为参数。
实现单行编辑的步骤
为了只编辑被点击的行，请按照以下步骤操作：
-
设置
editable属性为false: 确保表格默认情况下不可编辑。 -
在
onEdit回调函数中进行判断: 在onEdit函数中，检查事件对象 (event) 以确定点击的是哪一行。 通过比较事件目标 (event.target) 的 ID 或其他唯一标识符与当前行数据，来判断是否允许编辑。只有匹配时才允许编辑该行。 -
在输入框的
onChange事件中更新数据: 在编辑框的onChange事件处理函数中，使用事件对象作为参数，更新表格中对应行的数据。
通过以上步骤，您可以确保每次只编辑被点击的那一行。 请根据您的具体代码和数据结构调整 onEdit 和 onChange 函数中的逻辑。 记住，需要正确地识别和处理每一行的唯一标识符。
