解决 React Hook Form 提交表单时的意外刷新与数据提交问题

在使用 react hook form 时，表单提交后意外刷新页面、数据出现在 url 或验证失败，通常是由于 handlesubmit 函数的错误调用方式导致。本文将详细解释如何正确配置 form 的 onsubmit 属性，以确保 react-hook-form 能够正确拦截表单提交事件，阻止默认刷新行为，并有效处理表单数据与验证逻辑。

在 React 应用中构建表单时，react-hook-form 是一个广受欢迎的库，它以其高性能和简洁的API极大地简化了表单管理。然而，开发者有时会遇到表单提交后页面意外刷新的问题，导致表单数据丢失、验证消息不显示，甚至数据通过 URL 查询参数暴露。这通常不是 react-hook-form 的缺陷，而是其核心 handleSubmit 函数被误用的结果。

理解 handleSubmit 的作用

react-hook-form 提供的 handleSubmit 函数是一个高阶函数，它的主要职责是：

1. 在表单提交时，根据注册的字段收集所有表单数据。
2. 执行配置的验证规则（例如使用 Yup 或 Zod 进行模式验证）。
3. 如果验证通过，则调用用户提供的 onSubmit 回调函数，并将表单数据作为参数传递。
4. 最关键的一点是，handleSubmit 在内部已经处理了 event.preventDefault()，以阻止浏览器默认的表单提交行为（即页面刷新和数据编码到 URL）。

常见的错误用法

许多开发者在将 handleSubmit 绑定到 form 元素的 onSubmit 属性时，会不自觉地将其包裹在一个匿名函数中，如下所示：

// 错误示例
 handleSubmit(onSubmit)}>
  {/* ... 表单字段 ... */}
  

这种写法的问题在于，当表单被提交时，React 会调用 form 元素的 onSubmit prop 所引用的函数。如果这个函数是一个箭头函数 () => handleSubmit(onSubmit)，那么它会执行 handleSubmit(onSubmit)，但此时 DOM 的 SubmitEvent 对象并不会被传递给 handleSubmit。

handleSubmit 期望接收由浏览器触发的 SubmitEvent 对象，以便能够在其内部调用 event.preventDefault()。当它被包裹在匿名函数中时，它实际上是在 form 的 onSubmit 事件被触发之前或以一种不接收原始事件的方式被调用，导致 event.preventDefault() 未能生效，从而引发页面刷新。

扣子编程

扣子推出的AI编程开发工具

下载

正确的 handleSubmit 用法

解决这个问题的关键在于，将 handleSubmit 函数的返回值直接作为 form 元素的 onSubmit 属性值。handleSubmit 会返回一个事件处理器函数，这个函数才是真正应该绑定到 form 的 onSubmit 上的。

import React from 'react';
import { useForm, type SubmitHandler } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
// 假设有接口和redux相关导入
import { type IFormData } from 'interfaces/ISession';
import { useAppDispatch } from 'redux/hooks';
import { saveEmail } from 'redux/reducers/usersSlice';
import { useSessionMutation } from 'shared/httpService';

// 定义 Yup 验证 schema
const schema = yup
  .object({
    email: yup.string().email('请输入有效的邮箱地址').required('邮箱不能为空'),
    password: yup.string().min(8, '密码至少8位').max(16, '密码最多16位').required('密码不能为空'),
  })
  .required();

const Session = (): JSX.Element => {
  const dispatch = useAppDispatch();
  const [session] = useSessionMutation();

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema), // 使用 Yup 解析器进行验证
  });

  // 用户自定义的提交逻辑
  const onSubmit: SubmitHandler = async (data, event) => {
    // 注意：这里的 event 参数是可选的，且通常不需要手动调用 event.preventDefault()
    // 因为 handleSubmit 已经处理了。
    // 只有在特定场景下，如需要阻止事件冒泡等，才可能用到此处的 event。
    try {
      await session(data).unwrap(); // 发送数据到后端
      dispatch(saveEmail(data.email)); // 更新 Redux store
      alert('登录成功！');
    } catch (error) {
      console.error('登录失败:', error);
      alert('登录失败，请检查邮箱或密码。');
    }
  };

  return (
    // 正确的绑定方式：直接将 handleSubmit(onSubmit) 的返回值赋给 onSubmit 属性
    

      

        邮箱:
        
        {errors.email && {errors.email.message}}
      

      

        密码:
        
        {errors.password && {errors.password.message}}
      

      提交
    
  );
};

export default Session;

在上述代码中，