如何阻止useForm提交时页面刷新？表单提交异常求助

• 核心问题：表单提交事件绑定错误
  你在<form>的onSubmit里用了箭头函数() => handleSubmit(onSubmit)，这种写法会导致react-hook-form无法获取原生表单提交事件，既没法阻止默认的GET提交（所以URL会带上表单参数），也没法触发yup的校验逻辑。

• 解决步骤

  1. 修正表单的onSubmit绑定，直接传递handleSubmit(onSubmit)，不要用箭头函数包裹：

     <form onSubmit={handleSubmit(onSubmit)}>
     

  2. 移除onSubmit函数里的event.preventDefault()，因为react-hook-form的handleSubmit已经内置了阻止默认表单提交行为的逻辑，手动添加反而可能引发问题。

修改后的完整代码：

import React from 'react';
import { useForm, type SubmitHandler } from 'react-hook-form';
import { type IFormData } from 'interfaces/ISession';
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';

const schema = yup
  .object({
    email: yup.string().email().required(),
    password: yup.string().min(8).max(16).required(),
  })
  .required();

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

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<IFormData>({
    resolver: yupResolver(schema),
  });

  const onSubmit: SubmitHandler<IFormData> = async ({ email, password }) => {
    try {
      await session({ email, password }).unwrap();
      dispatch(saveEmail(email));
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="email" defaultValue="" {...register('email')} placeholder="email" />
      <span>{errors.email?.message}</span>

      <input type="password" defaultValue="" {...register('password')} placeholder="senha" />
      <span>{errors.password?.message}</span>

      <input type="submit" />
    </form>
  );
};

export default Session;

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