解决 react-hook-form 提交表单时页面刷新问题的正确姿势

本文详细阐述了在使用 react-hook-form 时，如何正确处理表单提交以避免页面刷新、数据暴露在url以及验证失败的问题。核心在于理解 handlesubmit 的正确用法，即将其返回值直接赋给 <form> 的 onsubmit 属性，而非通过额外的箭头函数包裹。

理解 react-hook-form 的 handleSubmit 机制

在使用 react-hook-form 构建表单时，开发者常遇到的一个问题是，尽管尝试了各种方法（如手动调用 event.preventDefault()），表单提交后页面依然会刷新，导致表单数据暴露在URL中，并且后端请求及前端验证（如Yup）也无法正常工作。这通常源于对 react-hook-form 提供的 handleSubmit 函数的误用。

react-hook-form 的 handleSubmit 是一个高阶函数，它的主要作用是接收一个自定义的表单提交逻辑函数作为参数，并返回一个新的事件处理函数。这个返回的事件处理函数在被调用时，会执行以下关键步骤：

1. 阻止默认行为： 自动调用 event.preventDefault()，阻止浏览器默认的表单提交行为（即页面刷新和数据编码到URL）。
2. 触发验证： 在执行自定义提交逻辑之前，根据配置的验证规则（如Yup resolver）对表单数据进行验证。
3. 执行提交逻辑： 如果验证通过，则调用传入的自定义提交逻辑函数，并将验证后的表单数据作为参数传递。

常见错误：将 handleSubmit 包装在箭头函数中

许多开发者可能会尝试以下方式来绑定表单的 onSubmit 事件：

<form onSubmit={() => handleSubmit(onSubmit)}>
  {/* ... 表单字段 ... */}
</form>

这种写法是导致页面刷新的主要原因。当 React 渲染组件时，onSubmit={() => handleSubmit(onSubmit)} 这段代码会被执行。这意味着 handleSubmit(onSubmit) 会被立即调用，并将其返回值（一个事件处理函数）包装在一个新的匿名箭头函数 () => ... 中。

问题在于，当表单实际提交时，React 调用的并不是 handleSubmit 返回的那个能够阻止默认行为的函数，而是这个外部的匿名箭头函数。这个匿名箭头函数在执行时，仅仅是再次调用了 handleSubmit 返回的函数，但此时它并没有接收到原生的 SyntheticEvent 对象。由于没有 event 对象，handleSubmit 内部的 event.preventDefault() 也就无法被执行，导致浏览器执行了默认的表单提交行为，从而引发页面刷新。

正确姿势：直接传递 handleSubmit 的返回值

要正确地阻止页面刷新并确保 react-hook-form 的验证机制正常工作，应该将 handleSubmit 的返回值直接赋给 <form> 元素的 onSubmit 属性：

采风问卷

采风问卷是一款全新体验的调查问卷、表单、投票、评测的调研平台，新奇的交互形式，漂亮的作品，让客户眼前一亮，让创作者获得更多的回复。

20

查看详情

<form onSubmit={handleSubmit(onSubmit)}>
  {/* ... 表单字段 ... */}
</form>

在这种写法中，handleSubmit(onSubmit) 会在组件渲染时被调用一次，它会返回一个已经“准备好”的事件处理函数。React 会将这个返回的函数作为 <form> 的 onSubmit 属性值。当用户点击提交按钮时，React 会直接调用这个由 handleSubmit 返回的函数，并将原生的 SyntheticEvent 对象传递给它。这样，handleSubmit 内部的 event.preventDefault() 就能被正确执行，从而阻止页面刷新，并确保后续的验证和自定义提交逻辑能够按预期运行。

示例代码：修正后的表单提交

以下是一个修正后的 react-hook-form 示例，展示了如何正确地配置表单提交：

import React from 'react';
import { useForm, type SubmitHandler } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
import { useAppDispatch } from 'redux/hooks';
import { saveEmail } from 'redux/reducers/usersSlice';
import { useSessionMutation } from 'shared/httpService';

// 假设 IFormData 和 useSessionMutation 等已定义
interface IFormData {
  email: string;
  password: string;
}

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<IFormData>({
    resolver: yupResolver(schema),
    // 默认值可以在这里设置，或者在 input 元素上使用 defaultValue
    defaultValues: {
      email: '',
      password: ''
    }
  });

  // onSubmit 函数不需要手动接收 event 参数，react-hook-form 会处理
  const onSubmit: SubmitHandler<IFormData> = async (data) => {
    // 注意：这里不再需要 event 参数，也不需要手动调用 event.preventDefault()
    try {
      await session(data).unwrap();
      dispatch(saveEmail(data.email));
      console.log('Form submitted successfully:', data);
    } catch (error) {
      console.error('Submission error:', error);
    }
  };

  return (
    // 关键修正：直接传递 handleSubmit(onSubmit)
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="email">邮箱:</label>
        <input id="email" type="email" {...register('email')} placeholder="请输入邮箱" />
        {errors.email && <span>{errors.email.message}</span>}
      </div>

      <div>
        <label htmlFor="password">密码:</label>
        <input id="password" type="password" {...register('password')} placeholder="请输入密码" />
        {errors.password && <span>{errors.password.message}</span>}
      </div>

      <button type="submit">提交</button>
    </form>
  );
};

export default Session;

在上述代码中，onSubmit={handleSubmit(onSubmit)} 是解决问题的核心。它确保了 react-hook-form 能够完全接管表单的提交流程，包括阻止默认行为、执行验证以及调用您的自定义提交逻辑。同时，自定义的 onSubmit 函数也不再需要手动处理 event 对象。

注意事项与最佳实践

• event.preventDefault() 是内置的： 记住 handleSubmit 已经内部处理了 event.preventDefault()，因此您的自定义提交逻辑中无需再次调用。
• Yup 验证集成： 确保 yupResolver 正确配置，并且 Yup schema 定义清晰，这样 formState.errors 才能捕获并显示验证消息。
• 错误消息显示： 利用 formState.errors 对象来显示与特定字段关联的验证错误信息，例如 errors.email?.message。
• 可访问性： 考虑为表单元素添加 label 标签和 htmlFor 属性，以提高表单的可访问性。
• 提交按钮类型： 确保提交按钮的 type 属性设置为 submit。

总结

正确使用 react-hook-form 的 handleSubmit 函数是构建高效、无刷新且验证功能完善的 React 表单的关键。通过将 handleSubmit(yourCustomSubmitFunction) 直接传递给 <form> 的 onSubmit 属性，您可以充分利用 react-hook-form 提供的所有便利功能，避免常见的表单提交问题，从而提升用户体验和开发效率。

以上就是解决 react-hook-form 提交表单时页面刷新问题的正确姿势的详细内容，更多请关注php中文网其它相关文章！