React Hook Form OnSubmit不触发 点击提交按钮无响应问题

核心问题出在Material UI的Dialog组件默认渲染逻辑：组件会通过Portal将弹窗内容挂载到页面根节点（通常是<body>下的独立节点），完全脱离你编写的<form>标签的DOM层级。你放在弹窗操作区的type="submit"按钮根本不属于表单内部元素，点击时自然无法触发表单绑定的onSubmit回调。
另外你的代码里还有两个会影响功能的隐性问题：

• FormDialog组件内判断表单错误时使用了未定义的name变量，会直接触发引用错误，应该读取props.name
• 你将父组件的onSubmit回调通过func prop传入，在关闭弹窗时直接调用的逻辑完全错误——onSubmit需要经过react-hook-form的handleSubmit包裹、表单校验通过后，才能拿到采集到的表单数据执行，直接调用拿不到任何表单值。

1. 让弹窗保留在原DOM层级
   给Dialog组件添加disablePortal属性，关闭默认的Portal挂载行为，让弹窗内容留在表单所在的DOM树内，保证submit按钮属于表单元素：

   <Dialog open={open} onClose={handleClose} disablePortal>
   

2. 修复未定义变量错误
   修正错误判断逻辑里的变量引用：

   if (errors && errors.hasOwnProperty(props.name)) {
     isError = true;
     errorMessage = errors[props.name].message;
   }
   

3. 修正提交逻辑
   不需要从父组件传递提交回调，直接在FormDialog内通过useFormContext取出react-hook-form的handleSubmit方法，给提交按钮绑定提交逻辑，表单校验通过后再执行关闭弹窗、后续业务操作：

   // 从form context中取出handleSubmit
   const {
     control,
     formState: { errors },
     setValue,
     handleSubmit
   } = useFormContext();
   
   // 提交按钮修改为
   <Button 
     variant="contained" 
     color="primary" 
     type="submit"
     onClick={handleSubmit((formData) => {
       // 这里可以拿到所有表单采集的数据
       console.log("提交的表单数据：", formData);
       setOpen(false);
       // 后续写提交接口调用等业务逻辑即可
     })}
   >
     Umbuchen
   </Button>
   

改完后点击提交按钮会先自动执行yup表单校验，校验通过就会进入回调拿到完整表单数据，校验失败会自动展示对应的错误提示。

内容的提问来源于stack exchange，提问作者Nicklas Desens