React + Ant Design Table 实现原地新增一行：用 useState 管理 dataSource，新增时 setDataSource([...dataSource, { key: Date.now(), name: '', age: null }])，每行 render 自定义输入框并用 ref 聚焦；key 必须稳定（如 Date.now()），禁用 rowKey="index"；提交前过滤空临时行。
结果面板里点一下就新增记录，不是跳转表单页
能直接在结果列表（比如 datatable 或 aggrid 渲染的表格）底部/空白处插入一行可编辑的新记录，关键不是打开新页面或弹窗，而是“原地追加 + 立即聚焦输入”。这需要绕过默认的“先点按钮 → 打开表单 → 提交 → 刷新列表”链路。
- 核心是让数据源（如
rows数组）实时新增一个空对象，并触发 UI 重渲染；同时把焦点自动落到第一列的输入框上 - 不能用
form.reset()后再showModal()，那是弹窗流；这里要的是“行内新增”，UI 层必须支持动态插入 editable 行（比如AgGrid的insertRowAtIndex()，或 React 中对useState数组的push()+useEffect聚焦 - 常见错误：直接
push({})但没触发 re-render（比如用了push原地修改数组却没用新引用），或插入后没处理 key 冲突（导致 React 不更新 input 框）
React + Ant Design Table 怎么实现原地新增一行
Ant Design 的 Table 默认不支持 editable 行，得自己封装。重点不在“加按钮”，而在“加完立刻可输”。
- 数据源用
useState管理，新增时用展开语法生成新数组：setDataSource([...dataSource, { key: Date.now(), name: '', age: null }]) - 每行用
render自定义单元格，当record.key是临时生成的（比如大于当前最大真实 ID），就渲染<input>并自动ref.current?.focus() - 别用
rowKey="index"，否则新增行会因索引错位导致焦点丢失；必须用稳定key（如Date.now()或uuid()） - 提交保存前，要过滤掉未填关键字段的临时行，避免发空数据到后端
Ag-Grid 中调用 api.applyTransaction() 插入新行后无法编辑
Ag-Grid 支持原生 editable 行，但插入后默认不进入编辑态，得手动触发。
- 插入必须用
api.applyTransaction({ add: [{ id: Date.now(), name: '', status: 'draft' }] })，不能直接改rowData数组 - 插入后立刻调用
api.startEditingCell()，参数要带准确的rowIndex（注意：刚插入的行在末尾，但api.getDisplayedRowAtIndex()可能因分页/筛选失效，稳妥做法是用api.forEachNode((node, index) => { if (node.data.id === newId) rowIndex = index })） - 如果列定义里没设
editable: true或cellEditor，插入后仍是只读；尤其注意colDef.editable是函数时，要确保新行也返回true - 别在
onRowValueChanged里直接发请求——新行还没填完就触发，容易存一半数据
为什么新增行一失焦就消失或变回只读
这不是 UI 框架 bug，而是状态管理没对齐。典型表现：点别的地方，刚打的字没了，或者整行缩回成普通文本。
- React 中，
Input的value必须受控（绑定 state），且 state 更新要和输入同步；如果用了defaultValue就会失焦后还原 - Ag-Grid 里，如果
getRowNodeId返回null或重复值，插入的新行会被框架当作无效节点丢弃 - 后端返回成功但没返回完整新记录（比如漏了
id），前端拿不到唯一标识，下次刷新列表就找不到这行，看起来像“消失了” - 表格启用了
rowSelection且监听了onSelectionChanged，结果选中新增行时触发了清空逻辑——检查事件回调里有没有误删isDraft行的代码
临时行的生命周期比你想象中更脆弱：它没 ID、没后端状态、依赖前端即时响应。任何一步没接住，它就没了。
