本文详解 React Hook Form 中 handleSubmit 无法正确传递表单数据的问题，指出常见错误在于 onSubmit 回调嵌套方式不当，并提供标准用法、代码修复示例及关键注意事项。
本文详解 react hook form 中 handlesubmit 无法正确传递表单数据的问题，指出常见错误在于 `onsubmit` 回调嵌套方式不当，并提供标准用法、代码修复示例及关键注意事项。
在使用 React Hook Form 时，一个高频误区是误以为 handleSubmit(onSubmit) 的返回值会自动将表单数据注入到外部传入的 onSubmit 函数中——实际上，handleSubmit 是一个高阶函数，它接收一个以表单数据为参数的回调函数，并在表单验证通过后调用该回调，并传入解析后的 data 对象。
你当前的写法：
<form onSubmit={handleSubmit(onSubmit)}>看似正确，但存在根本性问题：handleSubmit(onSubmit) 在组件渲染时即被立即执行（而非在表单提交时），且 onSubmit 接收的是原生 SubmitEvent，而非 data 对象。这是因为 handleSubmit 的返回值是一个事件处理器函数，而你直接将其作为 onSubmit 的参数传入，导致 onSubmit 被当作事件处理函数调用，而非数据处理函数。
✅ 正确做法是：将 handleSubmit 包裹一个箭头函数，显式接收 data 并透传给你的业务逻辑函数：
<form onSubmit={handleSubmit((data) => onSubmit(data))}>或者更简洁地（推荐）：
<form onSubmit={handleSubmit(onSubmit)}>⚠️ 注意：这仅在 onSubmit 函数签名明确接收 data: Record<string, any> 类型参数时才成立——也就是说，你的 handleConfirmAddScreen 必须设计为接收表单数据对象，而非事件对象。
因此，请确保 AddScreen 组件中的 onSubmit 调用方式与 Managerole 中定义的 handleConfirmAddScreen 函数签名一致：
// ✅ 正确：handleConfirmAddScreen 接收 data 对象
const handleConfirmAddScreen = (data) => {
console.log("Form data:", data); // { screenName: "dashboard" }
// ✅ 可安全访问 data.screenName
};
// ❌ 错误：若写成 handleConfirmAddScreen = (e) => { ... }，则 e 是 SyntheticEvent此外，还需注意以下几点：
移除 value 和 watch 的手动绑定：你在 <TextField> 中写了 value={watch("screenName")}，这会破坏 React Hook Form 的受控机制。register 已自动处理受控状态，应删除 value 属性，改用 defaultValue（初始值）或完全交由 RHF 管理。
确保 useForm 配置合理：mode: "onChange" 是可选的，但若表单字段较多，建议使用 "onSubmit"（默认）以提升性能；如需实时校验，再启用 "onChange"。
FormProvider 使用正确：你已正确包裹 <FormProvider>，确保子组件可通过 useFormContext() 访问上下文——但本例中 AddScreen 直接使用 useForm，因此无需 FormProvider（除非需跨多层组件共享 form 实例）。若 AddScreen 是独立表单，建议移除 <FormProvider>，避免上下文冲突。
修复后的 AddScreen 示例：
export const AddScreen = ({ onSubmit }) => {
const { handleSubmit, register } = useForm({
mode: "onSubmit", // 推荐默认模式
});
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Stack direction="column" gap="2rem">
<TextField
label="Screen Name"
required
select
name="screenName"
fullWidth
variant="outlined"
margin="dense"
{...register("screenName", {
required: "This field is required.",
})}
>
{screenNames?.map((item) => (
<MenuItem key={item.value} value={item.value}>
{item.label}
</MenuItem>
))}
</TextField>
</Stack>
</form>
);
};总结：React Hook Form 的 handleSubmit 不是“触发器”，而是“数据管道”——它负责收集、校验并结构化表单数据，最终以纯对象形式交付给你的回调函数。务必确保 onSubmit 函数设计为接收该数据对象，并通过 handleSubmit(callback) 正确绑定，才能获得预期行为。
