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

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

<form onSubmit={handleSubmit(onSubmit)}>
  {/* ... 表单字段 ... */}
</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;