React Hook Form中嵌套子表单提交触发父表单问题求助

首先要明确：HTML规范不允许表单嵌套，这是导致父表单被触发的根本原因，和id/htmlFor属性无关。以下是针对React Hook Form的可行解决方案：

方案1：用div替代子表单标签，单独控制提交逻辑 #

把子表单的<form>标签替换为<div>，通过React Hook Form的handleSubmit直接绑定到子表单的提交按钮上，彻底避免触发父表单的默认提交行为：

import { useForm } from "react-hook-form";

function ParentForm() {
  const { register, handleSubmit } = useForm();
  
  const onParentSubmit = (data) => {
    console.log("父表单提交:", data);
  };

  return (
    <form onSubmit={handleSubmit(onParentSubmit)}>
      <input {...register("parentInput")} placeholder="父表单输入" />
      
      {/* 子表单容器用div替代form */}
      <div className="child-form-container">
        <ChildForm />
      </div>

      <button type="submit">提交父表单</button>
    </form>
  );
}

function ChildForm() {
  const { register, handleSubmit } = useForm();
  
  const onChildSubmit = (data) => {
    console.log("子表单提交:", data);
  };

  return (
    <>
      <input {...register("childInput")} placeholder="子表单输入" />
      {/* 按钮type设为button，绑定子表单提交逻辑 */}
      <button type="button" onClick={handleSubmit(onChildSubmit)}>提交子表单</button>
    </>
  );
}

方案2：阻止子表单提交事件的冒泡与默认行为（不推荐，违反HTML规范） #

如果必须保留子表单的<form>标签，需在提交事件中强制阻止事件冒泡和默认行为：

function ChildForm() {
  const { register, handleSubmit } = useForm();
  
  const onChildSubmit = (data) => {
    console.log("子表单提交:", data);
  };

  const handleChildSubmit = (e) => {
    e.preventDefault(); // 阻止表单默认提交行为
    e.stopPropagation(); // 阻止事件冒泡到父表单
    handleSubmit(onChildSubmit)(); // 执行子表单提交逻辑
  };

  return (
    <form onSubmit={handleChildSubmit}>
      <input {...register("childInput")} placeholder="子表单输入" />
      <button type="submit">提交子表单</button>
    </form>
  );
}

关键注意事项 #

• 优先选择方案1，遵循HTML规范能避免浏览器的异常行为，保证代码的可维护性。
• 子表单的提交按钮若使用type="submit"，必须手动阻止事件冒泡，否则父表单的onSubmit会被触发。
• React Hook Form的handleSubmit仅负责验证和数据收集，不会改变浏览器原生的事件冒泡机制。

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