双击单元格触发编辑的核心是动态插入对齐的 input/textarea 并自动选中内容，而非直接 focus；需用 getBoundingClientRect 定位、避免 contenteditable、虚拟滚动下挂载到 body、用 useReducer 管理编辑状态、AntD 需绕过 user-select 限制并阻止默认滚动、失败时仅还原 input.value 不重置 state。
双击单元格触发编辑的 DOM 事件绑定逻辑
核心是监听 dblclick，但不能直接在 td 上绑 addeventlistener 后立刻 focus() 输入框——多数表格库（如原生 table、datatables、ag-grid）会拦截或重绘，导致焦点丢失或编辑器闪退。
真实可行的做法是：双击后动态插入一个 input 或 textarea 元素，位置与原单元格对齐，并自动 select() 内容。编辑完成（blur 或 Enter）后再把值写回数据源并还原为只读文本。
- 务必用
getBoundingClientRect()计算位置，避免因滚动、缩放、CSS transform 导致偏移 - 不要用
contenteditable="true"简单替代——它不校验类型、无法统一控制提交逻辑、移动端兼容差 - 若表格有虚拟滚动，需确保编辑态元素不被回收；可临时将编辑容器挂到
document.body并用position: fixed
React 中 useReducer + 自定义 Hook 实现内联编辑状态管理
直接在组件内用 useState 管理「当前编辑的 rowId + field」容易引发重渲染失控，尤其表格行数多时。更稳的方式是抽离编辑状态到 reducer，用唯一键（如 `${rowId}-${field}`）标识激活单元格。
示例关键逻辑：
const [editing, setEditing] = useReducer(
(state, action) => {
if (action.type === 'START') {
return { rowId: action.rowId, field: action.field, value: action.value };
}
if (action.type === 'CANCEL' || action.type === 'SAVE') {
return null;
}
return state;
},
null
);
-
START动作必须携带原始值（非响应式引用），否则输入过程中value可能滞后于 UI - 提交时应比对新旧值再调 API，避免无意义请求；空字符串和
null的语义需提前约定 - 键盘事件中
Escape触发CANCEL，Enter触发SAVE，但注意textarea需额外判断Shift+Enter换行
Ant Design Table 的 onCell 和 render 联动陷阱
很多人以为给 columns 配置 onCell: () => ({ onDoubleClick: handleEdit }) 就够了，实际会发现双击没反应——因为 AntD 默认禁用了单元格的 user-select，且 onCell 返回的 props 不会透传到最外层 td，而是包裹在内部 div 里。
- 必须配合
column.render返回带onDoubleClick的div，且该div需设style={{ userSelect: 'text' }} - 若启用
scroll.x，双击可能触发横向滚动而非编辑，需加event.preventDefault()在 handler 开头 - 编辑态下，
Table的rowSelection会干扰点击区域，建议编辑时临时禁用选择框rowSelection={editing ? null : rowSelection}
保存失败后如何还原 UI 且不丢失用户输入
网络错误或后端校验失败时，如果直接 setState 回旧值，UI 会闪一下，且光标位置丢失；更糟的是，用户刚输了一半的内容被清空。
- 本地先缓存编辑中的完整字段值（包括未提交的中间态），失败后仅还原
input.value，不重置 React state - 用
requestIdleCallback延迟提交，给用户留出快速连续修改的空间；但需设超时兜底（如 2s 后强制提交） - 后端返回 400 错误时，提取
errors.field并高亮对应单元格边框，不要只靠 message 提示——用户可能正盯着另一列
双击编辑看着简单，真正落地时最麻烦的永远不是“怎么弹出输入框”，而是“怎么让编辑过程像没发生过任何异常”。光标位置、异步状态、撤销边界、移动端长按冲突……这些细节堆起来，才决定它到底能不能上线。
