Dynamic Forms 动态表单字段
最后更新：2026-10-28
Dynamic Forms 动态表单字段
字段数量不定时，用 state 里的数组驱动渲染：每个字段存一条记录，增删就是增删数组元素，更新某一字段时按 id map 替换。配合稳定 key，React 能正确复用各行的输入框状态。
| 分组 | 组件模式 |
|---|---|
| 类型 | 模式 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
const [rows, setRows] = useState([{ id: 1, name: '' }])
setRows([...rows, { id: nextId(), name: '' }]) // 新增一行
setRows(rows.filter(r => r.id !== id)) // 删除一行
setRows(rows.map(r => r.id === id ? { ...r, name: v } : r)) // 改一格返回值：无返回值，作为编码模式使用。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
默认一行输入框；点「+ 添加一行」增加、点「删除」移除，各行输入互不影响，底部实时显示人数。💡 要点
💡 提示 列表 key 用业务 id 而不是数组下标，否则删中间行时其余行的输入状态会错位。
ℹ️ 说明 更新数组要保持不可变：filter / map 返回新数组，React 才能感知变化并重渲染。
⚠️ 注意 表单内的「增删行」按钮记得写 type="button"，否则会触发表单默认提交行为。
🏷️ 组件模式相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q 删除一行后其他行输入值错乱？
A key 用了数组下标：删除后下标前移，React 把输入框复用给了错误的记录。改用稳定业务 id 作 key。
Q 每行数据要拆成多个 useState 吗？
A 不要。行数动态变化，用「一个数组 state + 按 id 不可变更新」最简单，Hook 数量也不能动态增减。
Q 新行的 id 用什么生成？
A Date.now()、自增计数器或 crypto.randomUUID() 都可以，只要在同一列表内保持唯一稳定。
