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

// 错误示例
<form onSubmit={() => handleSubmit(onSubmit)}>
  {/* ... 表单字段 ... */}
  <input type="submit" />
</form>

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<IFormData>({
    resolver: yupResolver(schema), // 使用 Yup 解析器进行验证
  });

  // 用户自定义的提交逻辑
  const onSubmit: SubmitHandler<IFormData> = 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 属性
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="email">邮箱:</label>
        <input
          id="email"
          type="email"
          defaultValue=""
          {...register('email')}
          placeholder="请输入邮箱"
        />
        {errors.email && <span>{errors.email.message}</span>}
      </div>

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

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

export default Session;