Multi-Step Forms 分步表单
最后更新：2026-10-28
Multi-Step Forms 分步表单
分步表单 = 一个 step 状态 + 条件渲染当前步骤 + 各步数据统一放进一个表单 state。每步先做局部校验再前进，最后一步一次性提交全部数据，切步时数据不丢失。
| 分组 | 组件模式 |
|---|---|
| 类型 | 模式 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
const [step, setStep] = useState(0) // 当前步骤索引
const [data, setData] = useState({}) // 跨步共享的表单数据
// 条件渲染第 step 步；上一步/下一步只改 step返回值：无返回值，作为编码模式使用。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
第 1 步填姓名后才能「下一步」；第 2 步填城市后可提交；提交页汇总两步数据，底部步骤指示始终可见。💡 要点
💡 提示 各步数据放进同一个对象 state，切步不丢；用 disabled 做本步校验是最简单的「先过审再前进」。
ℹ️ 说明 步骤多时把配置抽成数组 map 渲染，或把 step 提升到路由参数，可前进后退、可分享链接。
⚠️ 注意 刷新页面会丢 step 和 data，需要断点续填时持久化到 sessionStorage 或用自定义 Hook 包装。
🏷️ 组件模式相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q 切换步骤时数据会丢吗？
A 不会，只要所有步骤共享同一个表单 state，step 只是控制「显示哪一步」，数据一直在。
Q 怎么实现步骤条进度指示？
A 步骤配置数组 map 渲染，用 index 与当前 step 比较，决定已完成/进行中/未开始的样式。
Q 提交前如何整体校验？
A 最后一步对所有步骤数据统一跑一遍 validate 函数，有错误则 setStep 跳回对应步骤高亮提示。
