React-Hook-Form嵌套带独立验证表单的可行性及实现疑问

1. <form>嵌套<form>是否可行？ #

HTML规范明确禁止嵌套<form>标签，浏览器会自动修正这种结构（比如把内部form移到外部），这就是你遇到父表单验证干扰子提交的核心原因——实际DOM结构和你写的React组件结构不一致，两个表单的事件、状态完全串了。这种写法绝对不推荐。

2. 要不要换用非React-Hook-Form方案？ #

完全没必要。React-Hook-Form（RHF）本身就支持独立表单实例，问题出在你违反了HTML规范的DOM结构，不是RHF的问题。

3. 正确的实现方式 #

方案：用RHF独立实例，移除嵌套的<form>标签 #

子表单（Dialog内）不需要用原生<form>包裹，直接单独初始化useForm实例，提交按钮绑定RHF的handleSubmit即可。这样两个表单的状态、验证逻辑完全隔离，不会互相干扰。

示例代码：

// 父表单实例
const { register, handleSubmit: handleParentSubmit } = useForm();

// 子表单（Dialog内）独立实例
const { register: registerChild, handleSubmit: handleChildSubmit } = useForm();

// 子表单提交逻辑
const handleChildSave = (data) => {
  // 将数据添加到表格
  addDataToTable(data);
  // 关闭Dialog
  setDialogOpen(false);
};

// Dialog内部结构
<Dialog open={dialogOpen}>
  <DialogContent>
    {/* 无需<form>包裹，直接用子表单的register */}
    <TextField 
      label="名称" 
      {...registerChild('name', { required: '名称不能为空' })} 
    />
    <TextField 
      label="邮箱" 
      {...registerChild('email', { 
        required: '邮箱不能为空',
        pattern: { value: /^\S+@\S+$/i, message: '请输入有效邮箱' }
      })} 
    />
  </DialogContent>
  <DialogActions>
    <Button onClick={() => setDialogOpen(false)}>取消</Button>
    <Button onClick={handleChildSubmit(handleChildSave)}>提交</Button>
  </DialogActions>
</Dialog>

4. useFieldArray是否适用？ #

useFieldArray是用来处理同一份表单内的动态数组字段（比如表格行的增删），而你的场景是两个独立表单，子表单提交后把数据追加到父组件的表格——这和useFieldArray的使用场景不匹配，完全不需要用它。你只需要在子表单提交成功后，把数据push到父组件维护的表格数据数组里就行。

总结 #

• 别碰HTML嵌套<form>，违反规范必然出问题
• 继续用React-Hook-Form，两个独立实例就能解决问题，核心是去掉子表单的<form>标签
• useFieldArray不适合你的场景，直接在子表单提交后更新父组件的表格数据即可

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