React Hook Form嵌套表单中隔离handleSubmit避免互相触发

在Next.js项目中使用React Hook Form处理表单时，遇到嵌套表单的问题：提交子表单FormB时，父表单FormA的提交逻辑也会被意外触发。

原问题代码示例 #

<FormA onSubmit={handleSubmit(submitFunctionA)}>
   ............
  <FormB onSubmit={handleSubmit(submitFunctionB)}>
  </FormB>
   ............
</FormA>

修复方案 #

问题根源是事件冒泡——子表单的提交事件会向上传递到父表单，触发父表单的提交逻辑。需要在子表单的提交处理中阻止事件传播和默认行为，避免父表单的提交逻辑被误触发。

修复后的代码 #

<form
  onSubmit={(event) => {
    // 执行子表单的提交逻辑
    handleSubmit(onSubmit)(event);

    if (event) {
      // 阻止默认表单提交行为
      if (typeof event.preventDefault === "function") {
        event.preventDefault();
      }
      // 阻止事件冒泡到父元素
      if (typeof event.stopPropagation === "function") {
        event.stopPropagation();
      }
    }
  }}
>
  {/* 子表单内容 */}
</form>

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