在使用 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 属性时，会不自觉地将其包裹在一个匿名函数中，如下所示：
// 错误示例
这种写法的问题在于，当表单被提交时，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({
resolver: yupResolver(schema), // 使用 Yup 解析器进行验证
});
// 用户自定义的提交逻辑
const onSubmit: SubmitHandler = 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 属性
);
};
export default Session; 在上述代码中，
