React.createPortal中event.stopPropagation失效及模态框表单异常求助

我完全懂你遇到的麻烦——给模态框遮罩加了点击关闭事件后，表单里的提交按钮居然失效了，哪怕加了event.stopPropagation()也不管用。这其实是事件冒泡在背后捣乱，咱们一步步把它搞定。

问题根源 #

你的模态框结构是这样的：

<Modal exitHandler={handleHideModal}>
  {/* 模态框内容（包含表单） */}
</Modal>

Modal组件的根div（也就是深色遮罩）绑定了onClick={exitHandler}，当你点击表单的提交按钮时，事件会顺着DOM树向上冒泡：先触发表单的onSubmit，然后继续冒泡到模态框内容容器，最后到达遮罩div，触发exitHandler（也就是你的handleHideModal）。

你在handleHideModal里加的event.stopPropagation()其实起不到作用，因为这个函数是在事件冒泡到遮罩时才被调用的，此时事件已经完成了向上传播的过程，阻止不了之前的流程，反而还会干扰表单的正常提交逻辑。

两种实用解决方案 #

方案一：在模态框内容容器上阻止事件冒泡 #

给所有模态框内容的根容器（modal-content）添加点击事件，直接阻止事件冒泡到遮罩层：

修改HelloWorld组件：

const HelloWorld = ({ user, onClose }) => {
 return (
  <div className="modal-content" onClick={(e) => e.stopPropagation()}>
   {/* 原有内容 */}
   <div className="modal-header">
    <div className="modal-title">
     <h2>Greetings</h2>
    </div>
    <div className="modal-action">
     <button type="button" onClick={onClose}>X</button>
    </div>
   </div>
   <div className="modal-body">
    <p>{user ? `Hello ${user}!` : "Greetings!"}</p>
   </div>
  </div>
 );
};

同样修改SignUp组件：

const SignUp = forwardRef((props, ref) => {
 const { onClose, onSignUp, handleChange, inputError, user } = props;
 useEffect(() => {
  ref.current.focus();
 });
 return (
  <div className="modal-content" onClick={(e) => e.stopPropagation()}>
   {/* 原有内容 */}
   <div className="modal-header">
    <div className="modal-title">
     <h2>Sign Up</h2>
    </div>
    <div className="modal-action">
     <button type="button" onClick={onClose}>X</button>
    </div>
   </div>
   <div className="modal-body">
    <form onSubmit={onSignUp} className="modal-form">
     <label className="input-label">
      <span>Name:</span>
      <input type="text" onChange={handleChange} value={user} ref={ref} className={inputError === true ? "input-error" : null} />
     </label>
     <input className="btn" type="submit" value="Submit" />
    </form>
   </div>
  </div>
 );
});

这样点击模态框内容区域的任何元素，事件都不会冒泡到遮罩div，只有点击遮罩空白区才会触发关闭，表单提交按钮也能正常工作了。

方案二：在关闭函数里判断点击目标是否为遮罩本身 #

不需要修改任何子组件，直接修改handleHideModal函数，只有当点击的元素是遮罩div本身时，才执行关闭逻辑：

const handleHideModal = (event) => {
  // 仅当点击遮罩元素本身时关闭模态框
  if (event.target === event.currentTarget) {
    setModalState(false);
  }
};

这里event.currentTarget指的是绑定了onClick事件的遮罩div，event.target是实际被点击的元素。如果两者相等，说明点击的是遮罩空白区；点击内容区域的按钮时，target是按钮或内容容器，不会触发关闭，表单提交完全不受影响。

额外优化建议 #

你可以把方案二的逻辑整合到Modal组件里，这样所有使用这个组件的地方都不用重复处理：

function Modal({ exitHandler, children }) {
 const handleMaskClick = (event) => {
  if (event.target === event.currentTarget) {
    exitHandler();
  }
 };
 return createPortal(
  <div className="modal" onClick={handleMaskClick}>
   {children}
  </div>,
  modalRoot
 );
}

这样Modal组件自己处理遮罩点击的判断逻辑，外部只需要传入关闭函数即可，代码更简洁、更易复用。

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