React Grid已实现单行编辑，如何实现多行同时编辑功能

云上老周

2026-8-31

React Grid 多行行编辑实现调整方案

问题根因

现有实现仅支持单行编辑，核心问题是使用单个editId变量存储编辑状态，同一时间只能记录一行的编辑标记，无法同时标记多行为编辑态。
当前核心逻辑代码：

return (
  <>
    <p>Sample Row Field</p>
    {editId === Id && editRow === true ? (
      <select options={options} handleChange={handleChange} />
    ) : (
      existingRowValue
    )}
  </>
);

现有效果：同一时间仅能有一行进入编辑状态，切换其他行编辑时会自动退出上一行的编辑态
目标效果：支持多行同时处于编辑状态，单条行的编辑/保存/取消操作不影响其他行的编辑状态

具体调整步骤

1. 替换状态定义

删除原有存储单个编辑ID、编辑布尔值的状态，改用Set结构存储所有处于编辑状态的行ID：

// 移除原有单值状态
// const [editId, setEditId] = useState(null);
// const [editRow, setEditRow] = useState(false);

// 替换为集合状态
const [editingRowIds, setEditingRowIds] = useState(new Set());

2. 修改编辑态渲染判断

将原来的单ID相等判断，改为判断当前行ID是否存在于编辑ID集合中：

return (
  <>
    <p>Sample Row Field</p>
    {editingRowIds.has(Id) ? (
      <select options={options} handleChange={handleChange} />
    ) : (
      existingRowValue
    )}
  </>
);

3. 调整编辑状态切换方法

操作状态时始终生成新的Set实例，保证React能正常检测到状态变更：

// 触发指定行进入编辑态
const handleEnterEdit = (rowId) => {
  setEditingRowIds(prev => new Set(prev).add(rowId));
};

// 触发指定行退出编辑态（保存/取消时调用）
const handleExitEdit = (rowId) => {
  setEditingRowIds(prev => {
    const nextSet = new Set(prev);
    nextSet.delete(rowId);
    return nextSet;
  });
};

// 需要批量退出所有行编辑时调用
const handleExitAllEdit = () => {
  setEditingRowIds(new Set());
};