React+AntdTable行内编辑bug修复

本文针对React+Antd Table组件行内编辑功能中出现的“点击一行后所有行都可编辑”的常见问题，提供详细解决方案。Ant Design Table的`editable`和`onEdit`属性是实现行内编辑的关键，但需巧妙运用。文章将指导您如何通过设置`editable`为`false`，并在`onEdit`回调函数中根据事件目标精确判断并仅编辑被点击的行，最终实现单行编辑效果，避免全局编辑的错误。 学习本文，轻松解决Antd Table行内编辑难题。

解决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 函数中的逻辑。 记住，需要正确地识别和处理每一行的唯一标识符。

到这里，我们也就讲完了《React+AntdTable行内编辑bug修复》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！