React Hook Form多步骤表单跳转页面时刷新问题调试求助

问题根源 #

1. 步骤切换按钮默认类型为submit，点击时触发表单默认提交行为，导致页面强制刷新。
2. 直接将onSubmit绑定到onClick，未正确利用React Hook Form的handleSubmit机制，无法正确收集和输出表单数据。

具体修复步骤 #

1. 修改按钮类型，阻止默认提交 #

将步骤切换按钮的type设置为button，避免触发表单默认刷新逻辑：

<button type="button" onClick={handleNext}>下一步</button>

2. 用handleSubmit包装步骤切换逻辑 #

通过React Hook Form的handleSubmit包裹自定义处理函数，既能完成字段验证，又能正确获取当前步骤的表单数据：

import { useForm } from "react-hook-form";

// 初始化表单，保留跨步骤的表单值
const { register, handleSubmit, trigger, getValues } = useForm({
  defaultValues: {
    firstName: "",
    lastName: "",
    email: ""
  }
});

// 处理下一步逻辑
const handleNext = async () => {
  // 验证当前步骤的必填字段
  const isValid = await trigger(["firstName", "lastName"]);
  if (isValid) {
    // 获取当前完整表单数据并输出
    const currentData = getValues();
    console.log("当前步骤数据：", currentData);
    // 切换至下一页
    setCurrentStep(prev => prev + 1);
  }
};

3. 最终提交逻辑（可选） #

如果需要在最后一步提交全部表单数据，可通过handleSubmit统一处理：

const onFinalSubmit = handleSubmit((fullData) => {
  console.log("完整表单数据：", fullData);
  // 这里可添加API请求等后续操作
});

// 最后一步的提交按钮
<button type="submit" onClick={onFinalSubmit}>提交表单</button>

关键说明 #

• trigger方法用于单独验证指定字段，确保当前步骤输入合法后再切换页面。
• getValues可获取当前表单的所有值，方便跨步骤数据整合。
• 始终通过handleSubmit处理表单数据，确保React Hook Form的状态管理机制正常运行。

内容的提问来源于stack exchange，提问作者Damilola Adegbemile