在使用 react hook form 时，表单提交后意外刷新页面、数据出现在 url 或验证失败，通常是由于 handlesubmit 函数的错误调用方式导致。本文将详细解释如何正确配置 form 的 onsubmit 属性，以确保 react-hook-form 能够正确拦截表单提交事件，阻止默认刷新行为，并有效处理表单数据与验证逻辑。
在 React 应用中构建表单时，react-hook-form 是一个广受欢迎的库，它以其高性能和简洁的API极大地简化了表单管理。然而，开发者有时会遇到表单提交后页面意外刷新的问题，导致表单数据丢失、验证消息不显示，甚至数据通过 URL 查询参数暴露。这通常不是 react-hook-form 的缺陷，而是其核心 handleSubmit 函数被误用的结果。
理解 handleSubmit 的作用
react-hook-form 提供的 handleSubmit 函数是一个高阶函数，它的主要职责是：
- 在表单提交时，根据注册的字段收集所有表单数据。
- 执行配置的验证规则（例如使用 Yup 或 Zod 进行模式验证）。
- 如果验证通过，则调用用户提供的 onSubmit 回调函数，并将表单数据作为参数传递。
- 最关键的一点是，handleSubmit 在内部已经处理了 event.preventDefault()，以阻止浏览器默认的表单提交行为（即页面刷新和数据编码到 URL）。
常见的错误用法
许多开发者在将 handleSubmit 绑定到 form 元素的 onSubmit 属性时，会不自觉地将其包裹在一个匿名函数中，如下所示：
// 错误示例
<form onSubmit={() => handleSubmit(onSubmit)}>
{/* ... 表单字段 ... */}
<input type="submit" />
</form>这种写法的问题在于，当表单被提交时，React 会调用 form 元素的 onSubmit prop 所引用的函数。如果这个函数是一个箭头函数 () => handleSubmit(onSubmit)，那么它会执行 handleSubmit(onSubmit)，但此时 DOM 的 SubmitEvent 对象并不会被传递给 handleSubmit。
handleSubmit 期望接收由浏览器触发的 SubmitEvent 对象，以便能够在其内部调用 event.preventDefault()。当它被包裹在匿名函数中时，它实际上是在 form 的 onSubmit 事件被触发之前或以一种不接收原始事件的方式被调用，导致 event.preventDefault() 未能生效，从而引发页面刷新。
正确的 handleSubmit 用法
解决这个问题的关键在于，将 handleSubmit 函数的返回值直接作为 form 元素的 onSubmit 属性值。handleSubmit 会返回一个事件处理器函数，这个函数才是真正应该绑定到 form 的 onSubmit 上的。
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;在上述代码中，<form onSubmit={handleSubmit(onSubmit)}> 是关键的修改。通过这种方式，handleSubmit 会在表单提交时被正确调用，它将能够接收到 DOM 的 SubmitEvent 对象，并执行其内部的 event.preventDefault()，从而阻止页面刷新。同时，它也会确保在验证通过后，将表单数据 data 传递给你的 onSubmit 回调函数。
注意事项
- 无需手动 event.preventDefault()： 在 onSubmit 回调函数内部（即 const onSubmit: SubmitHandler<IFormData> = async (data, event) => { ... }），通常不需要再次调用 event.preventDefault()。react-hook-form 已经为你处理了。只有在你需要执行一些额外的、与表单提交默认行为无关的事件操作时，才可能需要操作 event 对象。
- 验证错误显示： 正确绑定 handleSubmit 后，formState.errors 对象将能够准确地反映验证结果，并通过 <span>{errors.email?.message}</span> 等方式在 UI 上显示错误信息。
- 异步提交： onSubmit 回调函数可以是异步的（例如 async (data, event) => { ... }），react-hook-form 会正确处理异步提交过程中的状态。
总结
当使用 react-hook-form 时，表单提交后出现意外刷新、数据暴露在 URL 或验证失败的问题，几乎总是由于 handleSubmit 函数的绑定方式不正确。核心解决方案是将 handleSubmit(onSubmit) 的返回值直接赋给 form 元素的 onSubmit 属性，即 <form onSubmit={handleSubmit(onSubmit)}>。理解 handleSubmit 内部已包含 event.preventDefault() 机制，将有助于避免这类常见错误，并充分利用 react-hook-form 提供的强大功能。
