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

在使用 React Hook Form 构建表单时，开发者常会遇到一个问题：点击提交按钮后，页面意外刷新，表单数据被附加到浏览器的 URL 中，并且 yup 等验证库定义的错误消息未能正常显示。即使尝试在提交处理函数中手动调用 event.preventDefault()，问题也可能依然存在。这通常是由于 handleSubmit 函数的集成方式不正确所致。

理解 handleSubmit 的作用

react-hook-form 提供的 handleSubmit 函数是一个核心工具，它旨在简化表单提交流程。它接收一个自定义的提交处理函数（通常命名为 onSubmit），并返回一个适用于

1. 阻止默认行为： 自动调用 event.preventDefault()，防止浏览器默认的表单提交行为（如页面刷新、数据附加到 URL）。
2. 表单验证： 根据配置的 resolver（如 yupResolver），执行表单数据的验证。
3. 数据提取与传递： 如果验证通过，将表单数据以对象形式传递给您自定义的提交处理函数。
4. 错误处理： 如果验证失败，将错误信息设置到 formState.errors 中，供 UI 渲染。

常见的错误用法

导致上述问题的典型错误用法是将 handleSubmit 包装在一个匿名函数中，如下所示：

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

在这种情况下，onSubmit={() => handleSubmit(onSubmit)} 的作用是：当表单提交时，会执行这个匿名函数。这个匿名函数会立即调用 handleSubmit(onSubmit)。handleSubmit(onSubmit) 会返回一个事件处理函数，但这个返回的函数并没有被传递给

正确的集成方式

正确的做法是将 handleSubmit(onSubmit) 返回的事件处理函数直接传递给

Seed-TTS 是一个高质量多功能的文本到语音生成模型

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

示例代码与解析

以下是一个完整的示例，展示了如何正确地使用 react-hook-form 结合 yup 进行表单验证和提交，并避免页面刷新问题：

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(s*eEmail(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;

代码解析：

• useForm({ resolver: yupResolver(schema) })：初始化 useForm，并传入 yupResolver 来集成 yup 进行表单验证。
• onSubmit: SubmitHandler：定义了当表单验证通过后实际执行的逻辑。它接收一个包含所有表单数据的对象 data。
• ：这是解决问题的核心。handleSubmit(onSubmit) 会返回一个函数，这个函数负责在表单提交时：
  1. 自动调用 event.preventDefault()。
  2. 执行 yup 验证。
  3. 如果验证通过，调用我们定义的 onSubmit 函数，并将表单数据作为参数传递。
  4. 如果验证失败，更新 errors 状态，并阻止 onSubmit 函数的执行。
• errors.email?.message 和 errors.password?.message：用于显示 yup 验证失败时返回的错误信息。