React Hook Form onSubmit 表单数据未正确传递的解决方案-js教程-PHP中文网

React Hook Form onSubmit 表单数据未正确传递的解决方案

本文解决 React Hook Form 中 handleSubmit 未将表单数据传入回调函数的问题，核心在于正确使用 handleSubmit 包裹提交处理函数，避免直接触发事件对象而非表单值。

本文解决 react hook form 中 `handlesubmit` 未将表单数据传入回调函数的问题，核心在于正确使用 `handlesubmit` 包裹提交处理函数，避免直接触发事件对象而非表单值。

在使用 React Hook Form 时，handleSubmit 是一个高阶函数，它负责拦截原生表单提交事件、执行验证，并将解析后的表单数据作为参数传入你提供的回调函数。常见错误是误将 onSubmit 直接赋给 onConfirm（如示例中 onConfirm={handleConfirmAddScreen}），或在

中未正确绑定 handleSubmit，导致回调接收的是 SyntheticEvent 而非实际表单数据。

✅ 正确用法：handleSubmit 必须接收一个函数作为参数

你当前的写法：

✅ 这本身是正确的——但前提是 onSubmit 函数必须接受一个形参（如 data），且该函数需定义在作用域内可被调用。

Ainative React Sdk

使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。

下载

而问题根源往往出现在两个层面：

ConfirmationDialog 的 onConfirm 属性被错误使用
你将 onConfirm={handleConfirmAddScreen} 直接传给了对话框组件，但该 onConfirm 通常用于点击“确认按钮”时的回调（不经过表单校验和数据收集），它与表单提交逻辑无关。真正的表单数据应仅由
触发的 handleSubmit 传递。
AddScreen 中缺少 watch 的依赖与初始化
示例代码中使用了 watch("screenName")，但未从 formProps 解构 watch，也未确保 screenNames 已定义或已加载，可能导致渲染异常或注册失效。

✅ 修正后的 AddScreen 组件（推荐写法）

import { useForm, FormProvider, useWatch } from 'react-hook-form';

export const AddScreen = ({ onSubmit }) => {
  const formProps = useForm({
    mode: 'onChange',
  });

  const { handleSubmit, register, watch } = formProps;

  // ✅ 确保 watch 可用（useWatch 更安全，尤其在动态字段中）
  const screenNameValue = useWatch({ name: 'screenName', control: formProps.control });

  return (
    <formprovider><form onsubmit="{handleSubmit(onSubmit)}"> {/* ✅ 正确：handleSubmit(onSubmit) 自动注入 data */}
        <stack direction="column" gap="2rem"><textfield label="Screen Name" required select name="screenName" fullwidth variant="outlined" margin="dense" required: field is required.>
            {screenNames?.map((item) => (
              <menuitem key="{item.value}" value="{item.value}">
                {item.label}
              </menuitem>
            ))}
          </textfield>
          {/* 可选：添加提交按钮，确保表单可提交 */}
          <button type="submit" variant="contained" color="primary">
            Submit
          </button>
        </stack>
</form>
    </formprovider>
  );
};

? 注意：的 onConfirm 属性在此场景下不应承担表单提交职责；它只需关闭弹窗。表单提交应完全由
控制。若需禁用对话框默认按钮提交行为，可设置 onConfirm={() => {}} 或移除 onConfirm 属性，仅保留表单内按钮。

⚠️ 常见陷阱与检查清单

❌ 错误：onSubmit={handleSubmit(onSubmit)} 写成 onSubmit={handleSubmit(onSubmit())}（立即执行函数，返回 undefined）
❌ 错误：未解构 watch 或未传入 control，导致 watch() 返回 undefined
❌ 错误：TextField 的 value 属性与 register 冲突（RHF 推荐由 register 控制受控状态，不要手动设 value）→ 应删除 value={watch("screenName")}，RHF 自动管理
✅ 最佳实践：使用 useWatch 替代 watch() 在渲染中读取值，避免闭包 stale issue
✅ 验证：打开浏览器控制台，提交表单后 handleConfirmAddScreen(data) 应打印出类似 { screenName: "dashboard" } 的纯对象