使用React-Hook-Form的handleSubmit提交表单触发页面重载如何解决

问题根因 #

React Hook Form 内置的handleSubmit方法已经默认实现了e.preventDefault()逻辑，正常使用不会触发页面重载，出现该问题基本属于使用姿势错误，以下是对应修复方案：

常见场景及修复方案 #

• 场景1：未将handleSubmit绑定到form标签的onSubmit属性 #

  很多开发者会在提交按钮的onClick事件中直接调用handleSubmit，这种情况下没有将原生提交事件对象传入RHF，导致内置的preventDefault不生效。
  错误写法示例：

  // 错误：按钮点击直接调用，未传递事件对象
  const { handleSubmit } = useForm()
  const submitForm = (data) => console.log(data)
  
  return <button onClick={() => handleSubmit(submitForm)()}>提交</button>
  

  正确写法：将handleSubmit绑定到form标签的onSubmit属性，提交按钮设置type="submit"

  const { handleSubmit, register } = useForm()
  const submitForm = (data) => console.log(data)
  
  return (
    <form onSubmit={handleSubmit(submitForm)}>
      <input {...register('username')} />
      <button type="submit">提交</button>
    </form>
  )
  

• 场景2：多表单场景下存在未声明type的按钮或表单嵌套 #

  • HTML原生按钮默认type="submit"，如果你在表单内插入了非提交用的按钮，没有显式声明type="button"，点击该按钮会触发默认提交行为。
  • HTML规范不支持表单嵌套，如果多个独立表单存在嵌套结构，提交事件会冒泡到父级表单，触发默认刷新。

• 场景3：需要手动获取提交事件对象 #

  如果你确实需要自定义提交逻辑、手动调用preventDefault，handleSubmit的回调函数支持接收第二个参数为原生事件对象：

  const submitForm = (data, e) => {
    // 此处可直接拿到原生事件对象，按需做额外处理
    console.log('表单数据', data)
    console.log('原生事件', e)
  }
  

  特殊场景需要手动触发提交的场景，可主动传递事件对象：

  const customTriggerSubmit = async (e) => {
    // 也可自行先执行preventDefault
    e.preventDefault()
    await handleSubmit(submitForm)(e)
  }
  

• 多表单额外注意项 #

  每个独立表单要单独调用useForm()初始化实例，不要多个表单共用同一个useForm返回的方法和状态，避免逻辑冲突。

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