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

理解 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 事件：

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

  {/* ... 表单字段 ... */}

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

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

  // onSubmit 函数不需要手动接收 event 参数，react-hook-form 会处理
  const onSubmit: SubmitHandler = 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)
    
      

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

      

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

      提交
    
  );
};

export default Session;