React嵌套表单提交异常：提交弹窗表单时背景表单也触发提交

使用React + react-hook-form开发时，遇到弹窗表单提交会触发背景表单同时提交的问题，两个表单ID独立、submit函数不同、按钮都在对应form标签内，但问题仍存在。

核心原因 #

HTML规范不允许表单嵌套，浏览器会自动修正DOM结构，导致两个表单的submit事件被错误关联，即使使用react-hook-form也无法绕过这个原生限制。

针对性解决方法 #

1. 彻底避免表单嵌套（推荐） #

将弹窗表单通过React Portal挂载到body节点下，让两个表单处于平级DOM结构，从根源上解决嵌套问题。

示例代码：

import { useState } from 'react';
import { createPortal } from 'react-dom';
import { useForm } from 'react-hook-form';

const BackgroundForm = () => {
  const { register, handleSubmit } = useForm();
  const [showModal, setShowModal] = useState(false);

  const onBackgroundSubmit = (data) => {
    console.log('背景表单提交', data);
  };

  return (
    <form onSubmit={handleSubmit(onBackgroundSubmit)}>
      <input {...register('backgroundInput')} placeholder="背景表单输入" />
      <button type="button" onClick={() => setShowModal(true)}>打开弹窗表单</button>
      
      {showModal && <ModalForm onClose={() => setShowModal(false)} />}
    </form>
  );
};

const ModalForm = ({ onClose }) => {
  const { register, handleSubmit } = useForm();

  const onModalSubmit = (data) => {
    console.log('弹窗表单提交', data);
    onClose();
  };

  return createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <form onSubmit={handleSubmit(onModalSubmit)}>
          <input {...register('modalInput')} placeholder="弹窗表单输入" />
          <div>
            <button type="button" onClick={onClose}>取消</button>
            <button type="submit">提交</button>
          </div>
        </form>
      </div>
    </div>,
    document.body
  );
};

2. 阻止弹窗表单的事件冒泡（临时方案） #

如果无法调整DOM结构，在弹窗表单的submit回调中手动阻止事件冒泡，避免触发父表单的submit事件：

const onModalSubmit = (data, e) => {
  e.stopPropagation();
  console.log('弹窗表单提交', data);
};

<form onSubmit={handleSubmit(onModalSubmit)}>
  {/* 弹窗表单内容 */}
</form>

3. 确保两个表单的react-hook-form实例完全隔离 #

检查背景表单和弹窗表单是否各自独立调用useForm()，不要共享同一个form实例。弹窗组件内部需单独创建form实例：

// 弹窗组件内独立初始化form
const { register, handleSubmit } = useForm();

验证步骤 #

1. 打开浏览器开发者工具的Elements面板，确认两个<form>标签没有嵌套（浏览器可能自动将内部form移出到外部）。
2. 检查提交按钮的type属性是否为submit，避免使用button类型引发原生行为冲突。

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