React Hook Form：解决表单提交时页面刷新与数据丢失问题

// 错误示例
<form onSubmit={() => handleSubmit(onSubmit)}>
  {/* ...表单字段... */}
  <input type="submit" />
</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';

// 假设 IFormData 定义了表单数据的类型
interface IFormData {
  email: string;
  password: string;
}

// 定义 Yup 验证 schema
const schema = yup
  .object({
    email: yup.string().email('请输入有效的邮箱地址').required('邮箱是必填项'),
    password: yup.string().min(8, '密码至少需要8个字符').max(16, '密码最多16个字符').required('密码是必填项'),
  })
  .required();

const SessionForm = (): JSX.Element => {
  // 使用 useForm 钩子初始化表单
  const {
    register, // 用于将输入字段注册到 React Hook Form
    handleSubmit, // 用于处理表单提交
    formState: { errors }, // 获取表单错误状态
  } = useForm<IFormData>({
    resolver: yupResolver(schema), // 集成 Yup 验证器
  });

  // 定义自定义的提交处理函数
  // 注意：这个函数接收表单数据作为第一个参数，event 作为可选的第二个参数
  // 在这里不需要手动调用 event.preventDefault()
  const onSubmit: SubmitHandler<IFormData> = async (data, event) => {
    // 即使 event 存在，也不需要手动调用 event.preventDefault()，
    // 因为 handleSubmit 已经处理了
    console.log('表单提交数据:', data);
    // 模拟异步操作，例如发送 API 请求
    try {
      // await yourApiService.submit(data);
      console.log('数据提交成功！');
      // dispatch(saveEmail(data.email)); // 示例：Redux dispatch
    } catch (error) {
      console.error('数据提交失败:', error);
    }
  };

  return (
    // 关键：将 handleSubmit(onSubmit) 直接传递给 form 的 onSubmit 属性
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="email">邮箱:</label>
        <input
          id="email"
          type="email"
          placeholder="请输入邮箱"
          {...register('email')} // 注册邮箱字段
        />
        {errors.email && <span>{errors.email.message}</span>} {/* 显示邮箱验证错误 */}
      </div>

      <div>
        <label htmlFor="password">密码:</label>
        <input
          id="password"
          type="password"
          placeholder="请输入密码"
          {...register('password')} // 注册密码字段
        />
        {errors.password && <span>{errors.password.message}</span>} {/* 显示密码验证错误 */}
      </div>

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

export default SessionForm;