本文旨在解决使用 react hook form 时，因 `handlesubmit` 用法不当导致的表单提交后页面刷新、数据暴露在 url 及验证失效等问题。核心在于明确 `handlesubmit` 的正确集成方式，即将其返回的事件处理函数直接传递给 `
在这种情况下，onSubmit={() => handleSubmit(onSubmit)} 的作用是：当表单提交时，会执行这个匿名函数。这个匿名函数会立即调用 handleSubmit(onSubmit)。handleSubmit(onSubmit) 会返回一个事件处理函数，但这个返回的函数并没有被传递给
示例代码与解析
以下是一个完整的示例，展示了如何正确地使用 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({
resolver: yupResolver(schema), // 集成 Yup 验证器
});
// 定义自定义的提交处理函数
// 注意：这个函数接收表单数据作为第一个参数，event 作为可选的第二个参数
// 在这里不需要手动调用 event.preventDefault()
const onSubmit: SubmitHandler = 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 属性
);
};
export default SessionForm; 代码解析：
- useForm
({ resolver: yupResolver(schema) })：初始化 useForm，并传入 yupResolver 来集成 yup 进行表单验证。 - onSubmit: SubmitHandler
：定义了当表单验证通过后实际执行的逻辑。它接收一个包含所有表单数据的对象 data。 - errors.email?.message 和 errors.password?.message：用于显示 yup 验证失败时返回的错误信息。
注意事项与最佳实践
- 无需手动 event.preventDefault()： 当您将 handleSubmit(onSubmit) 直接传递给
- 异步提交： 如果您的 onSubmit 函数涉及异步操作（如 API 调用），请确保将其定义为 async 函数，以便正确处理 await 关键字。
-
类型安全： 强烈建议为表单数据定义接口（如 IFormData），并通过泛型传递给 useForm
和 SubmitHandler ，以获得更好的类型检查和开发体验。 - 错误显示： 利用 formState: { errors } 对象来动态显示验证错误信息，提升用户体验。
总结
正确使用 react-hook-form 的 handleSubmit 函数是构建健壮、用户友好的 React 表单的关键。通过将 handleSubmit(yourSubmitFunction) 直接传递给
