React 18：解决.map生成多输入框的单单元格编辑异常问题

核心思路 #

放弃用全局布尔值控制所有行的编辑状态，改用**存储当前正在编辑的行索引（或唯一ID）**的方式，精准控制单一行的可编辑状态与操作按钮的生效范围。

具体实现步骤 #

1. 修改状态定义
   把原来控制全局编辑状态的布尔值（比如isEditing）替换为存储当前编辑行索引的状态，初始值设为null表示无编辑行：

   const [currentEditingIndex, setCurrentEditingIndex] = useState(null);
   

2. 绑定双击事件
   在每个属性值单元格上绑定双击事件，触发时将当前行的索引存入状态：

   <td 
     onDoubleClick={() => setCurrentEditingIndex(index)}
     data-index={index} // 用于后续判断点击区域
   >
     {/* 渲染内容 */}
   </td>
   

3. 控制单元格可编辑状态
   渲染单元格内容时，仅当当前行索引与currentEditingIndex匹配时，才显示可编辑输入框，否则显示只读文本：

   <td 
     onDoubleClick={() => setCurrentEditingIndex(index)}
     data-index={index}
   >
     {currentEditingIndex === index ? (
       <input 
         type="text" 
         value={item.value} 
         onChange={(e) => handleValueChange(index, e.target.value)}
         autoFocus // 双击后自动聚焦输入框
       />
     ) : (
       <span>{item.value}</span>
     )}
   </td>
   

4. 限制操作按钮的生效范围
   操作列的按钮仅在当前编辑行显示（或启用），确保按钮只对正在编辑的行生效：

   <td>
     {currentEditingIndex === index ? (
       <>
         <button onClick={() => handleSave(index)}>Save</button>
         <button onClick={() => handleCancel(index)}>Cancel</button>
         <button onClick={() => handleDelete(index)}>Delete</button>
         <button onClick={() => handleInfo(index)}>Info</button>
       </>
     ) : null}
   </td>
   

5. 点击外部区域恢复只读
   添加全局点击监听，当点击非当前编辑单元格的区域时，重置编辑状态：

   useEffect(() => {
     const handleClickOutside = (e) => {
       const editingCell = document.querySelector(`[data-index="${currentEditingIndex}"]`);
       if (editingCell && !editingCell.contains(e.target)) {
         setCurrentEditingIndex(null);
       }
     };
   
     if (currentEditingIndex !== null) {
       document.addEventListener('click', handleClickOutside);
     }
   
     return () => {
       document.removeEventListener('click', handleClickOutside);
     };
   }, [currentEditingIndex]);
   

为什么之前的方案无效？ #

• 用全局布尔状态时，所有行都会基于同一个状态值判断编辑状态，导致双击任意行都会触发所有行变为可编辑。
• 仅靠动态ID或event.currentTarget无法隔离各行的状态，因为状态是全局共享的，必须通过索引/唯一ID来区分不同行的编辑状态。

内容的提问来源于stack exchange，提问作者Common Man