React Hook Form调用onSubmit时失效问题求助

我看了你的代码，页面刷新且onSubmit没执行的问题，大概率是这几个原因导致的，咱们一步步排查解决：

1. 移除按钮多余的form属性 #

你的提交按钮已经在<form>标签内部了，却额外设置了form="formName"属性。这会让浏览器的表单提交逻辑出现冲突，React的事件处理可能没来得及阻止默认刷新行为。

修改按钮代码，删掉form="formName"：

<button 
  className="inline-flex items-center justify-center px-5 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-indigo-700 bg-indigo-100 hover:text-indigo-600 hover:bg-indigo-50 focus:outline-none focus:shadow-outline focus:border-indigo-300 transition duration-150 ease-in-out"
  variant={props.buttonColor}
  size={props.inputSize}
  type="submit"
  disabled={pending}
>
  {/* ...按钮内容 */}
</button>

2. 确保表单字段正确注册到react-hook-form #

目前你的Dropdown和Pill组件虽然传了registerInput={register}，但要确认内部是否正确给输入元素绑定了name属性并调用register。比如Dropdown里的选择器应该这样注册：

// Dropdown组件内部示例
<select {...registerInput("substance")}>
  {/* 选项内容 */}
</select>

如果字段没有正确注册，react-hook-form可能无法识别表单内容，导致handleSubmit的回调无法触发，浏览器就会执行默认的表单刷新。

3. 手动阻止默认提交行为（兜底方案） #

如果上面的方法没用，可以在handleSubmit的回调里手动阻止默认行为，或者在form的onSubmit事件里直接处理：

const onSubmit = (data, e) => {
  e.preventDefault(); // 手动阻止默认刷新
  console.log(data);
};

// 或者在form标签里直接处理
<form onSubmit={(e) => {
  e.preventDefault();
  handleSubmit(onSubmit)();
}} id="formName">

4. 检查react-hook-form版本兼容性 #

如果你使用的是react-hook-form v7+，errors已经被整合到formState.errors里了，原来的解构方式const { errors } = useForm();会拿到空值，可能影响表单验证逻辑。建议更新解构方式：

const { register, handleSubmit, watch, formState: { errors, isSubmitting } } = useForm();

同时把按钮的disabled={pending}改成disabled={isSubmitting}，利用react-hook-form内置的提交状态，更可靠。

按照上面的步骤调整后，表单应该就能正常触发onSubmit回调，不会再刷新页面了。

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