react+ant design表格单行编辑实现
在React+Ant Design表格中，如何只在点击特定行时才显示可编辑的输入框？本文提供一种解决方案，避免所有行同时显示输入框的困扰。 我们将使用Ant Design的ref属性和受控组件技术来实现这一功能。
首先，我们需要使用ref属性来获取表格行的引用：
<code class="javascript">// 使用 ref 属性获取特定行的引用
<Table.Row ref={rowRef}></Table.Row></code>
然后，在useEffect钩子函数中，利用rowRef获取行元素并监听点击事件：
<code class="javascript">useEffect(() => {
const handleRowClick = (e) => {
// 获取点击行的 ref
const targetRow = rowRef.current;
// 判断是否点击了当前行
if (targetRow === e.target) {
// 显示输入框 (假设 targetRow 有一个 isEditing 状态)
targetRow.setState({ isEditing: true });
}
};
// 监听表格中的每一行点击事件 (假设 tableRef 指向表格组件)
tableRef.current.addEventListener('click', handleRowClick);
return () => {
// 移除事件监听器
tableRef.current.removeEventListener('click', handleRowClick);
};
}, [tableRef, rowRef]);</code>
这段代码的核心在于handleRowClick函数。它获取点击事件的目标元素，并与rowRef指向的行元素进行比较。只有当点击事件发生在当前行上时，才将isEditing状态设置为true，从而显示输入框。 useEffect钩子确保事件监听器在组件挂载时添加，卸载时移除，避免内存泄漏。 请注意，targetRow.setState({ isEditing: true }); 假设你的表格行组件内部已经实现了isEditing状态来控制输入框的显示隐藏。 你需要根据你的实际代码调整状态的名称和更新方式。 此外，tableRef也需要根据你的代码进行调整，指向你的Ant Design Table组件。
通过这种方法，我们可以精确控制只有点击的行才会显示可编辑的输入框，从而提升用户体验。
