如何阻止react-hook-form多步骤表单完成输入后自动提交？

AI 小北

2026-6-26

多步骤表单提前自动提交问题的解决方法

问题根源

你的表单在点击第三步的「下一步」时自动提交，核心原因是按钮未明确指定类型：HTML 中 <button> 标签默认类型为 submit，点击时会触发表单的 onSubmit 逻辑，而非仅执行你定义的 goToNextPage。

修复步骤

给所有「下一步」按钮添加type="button"
把页面中所有用于切换步骤的按钮明确设置类型，避免触发默认提交行为：
```
<button type="button" onClick={goToNextPage} className="...">
  下一步
</button>
```
单独设置提交按钮的类型
仅把最终提交表单的按钮设为type="submit"，确保只有点击它才会触发onSubmit：
```
<button type="submit" className="...">
  提交表单
</button>
```

优化步骤切换逻辑
在goToNextPage函数中，判断当前是否为最后一步，避免无效跳转：

const goToNextPage = async () => {
  const fields = steps[currentFormPage].fields;
  const output = await form.trigger(fields as FieldName[], {
    shouldFocus: true,
  });

  if (!output) return;

  // 仅当不是最后一步时才切换页面
  if (currentFormPage < steps.length - 1) {
    setPreviousStep(currentFormPage);
    setCurrentFormPage((step) => step + 1);
  }
  // 最后一步时不做跳转，让用户点击提交按钮
};