使用react-hook-form开发多步骤表单，如何避免非提交按钮触发提交？

核心解决方法很简单：给所有非提交功能的按钮显式设置type="button"。因为HTML里<button>元素在<form>标签内的默认type是submit，哪怕你没写这个属性，点击后也会自动触发表单提交。

修改后的表单渲染代码 #

<div className='w-full h-96 flex flex-col pt-5 gap-5 px-5'>
  <form onSubmit={props.handleSubmit(props.onSubmit)} >
    {view}

    {/* 第三步保留type="submit"的提交按钮 */}
    {props.form > 2 ? 
    <button type='submit' className='w-full mt-5 h-10 rounded-md bg-learnode-green1 bg-opacity-10 font-semibold'>Submit</button> : 
    {/* 给Next Step按钮添加type="button"，避免触发表单提交 */}
    <button type="button" className='w-full mt-5 h-10 rounded-md bg-learnode-green1 bg-opacity-10 font-semibold disabled:bg-gray-300 disabled:bg-opacity-9 disabled:text-gray-500' onClick={() => props.setForm(box => box +1)}>Next Step</button>
    }

    {/* 给Back和Login按钮添加type="button" */}
    {props.form > 1 ? 
    <button type="button" className='w-full h-10 rounded-md bg-gray-50 bg-opacity-5 text-xs text-green-400 ' onClick={() => handleBack()} >Back</button> : 
    <button type="button" className='w-full h-10 rounded-md bg-gray-50 bg-opacity-5 text-xs text-green-400 ' onClick={() => handleClick2()} >Already have an account? Login</button>
    }
  </form>
</div>

可选优化：分步字段校验 #

如果需要确保当前步骤的字段填写合法后才能进入下一步，可以借助react-hook-form的trigger方法做分步验证：

// 在组件内定义分步校验逻辑
const handleNext = async () => {
  let isValid = false;
  switch(props.form) {
    case 1:
      isValid = await props.trigger('name'); // 校验第一步的name字段
      break;
    case 2:
      isValid = await props.trigger('email'); // 校验第二步的email字段
      break;
    default:
      isValid = true;
  }
  if (isValid) {
    props.setForm(prev => prev + 1);
  }
};

之后把Next按钮的onClick替换成onClick={handleNext}即可。

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