解决react+antd table行内编辑的常见问题
使用React和Ant Design Table组件构建表格时，实现行内编辑功能可能会遇到一个问题：点击一行后，表格中所有行的编辑框都显示出来。 本文提供解决方案，确保仅编辑被点击的行。
Ant Design Table的行内编辑属性
Ant Design Table 提供了 editable 和 onEdit 两个关键属性来实现行内编辑：
实现单行编辑的步骤
为了只编辑被点击的行，请按照以下步骤操作：
设置 editable 属性为 false: 确保表格默认情况下不可编辑。
在 onEdit 回调函数中进行判断: 在 onEdit 函数中，检查事件对象 (event) 以确定点击的是哪一行。 通过比较事件目标 (event.target) 的 ID 或其他唯一标识符与当前行数据，来判断是否允许编辑。只有匹配时才允许编辑该行。
在输入框的 onChange 事件中更新数据: 在编辑框的 onChange 事件处理函数中，使用事件对象作为参数，更新表格中对应行的数据。
通过以上步骤，您可以确保每次只编辑被点击的那一行。 请根据您的具体代码和数据结构调整 onEdit 和 onChange 函数中的逻辑。 记住，需要正确地识别和处理每一行的唯一标识符。
以上就是React+Antd Table行内编辑：如何避免点击一行后所有行都可编辑？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
723
