React模态框按ESC触发父组件事件的解决方案咨询

方案1：在模态框的键盘事件中阻止冒泡与默认行为 #

当TestModal捕获到ESC键事件时，直接阻止事件向上冒泡到父组件，同时阻止默认行为，让父页面的ESC事件监听无法被触发。

// TestModal组件内部
import { useEffect } from 'react';

const TestModal = ({ isOpen, onClose }) => {
  const handleKeyDown = (e) => {
    if (e.key === 'Escape') {
      e.stopPropagation(); // 阻断事件向父组件/全局传递
      e.preventDefault();
      onClose();
    }
  };

  useEffect(() => {
    if (!isOpen) return;

    const listener = (e) => handleKeyDown(e);
    window.addEventListener('keydown', listener);
    return () => window.removeEventListener('keydown', listener);
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    <div className="modal-overlay">
      <div className="modal-content">
        {/* 模态框内容 */}
      </div>
    </div>
  );
};

方案2：通过状态控制父组件的事件监听 #

在父组件中维护TestModal的打开状态，当模态框处于激活状态时，直接跳过父页面ESC事件的注册，从根源上切断冲突路径。

// 父页面组件
import { useState, useEffect } from 'react';
import TestModal from './TestModal';

const ParentPage = () => {
  const [isTestModalOpen, setIsTestModalOpen] = useState(false);
  const [isDiscardModalOpen, setIsDiscardModalOpen] = useState(false);

  useEffect(() => {
    // 模态框打开时，不注册父级ESC事件
    if (isTestModalOpen) return;

    const handleEsc = (e) => {
      if (e.key === 'Escape') {
        setIsDiscardModalOpen(true);
      }
    };

    window.addEventListener('keydown', handleEsc);
    return () => window.removeEventListener('keydown', handleEsc);
  }, [isTestModalOpen]);

  return (
    <div className="page-container">
      {/* 页面内容 */}
      <TestModal 
        isOpen={isTestModalOpen} 
        onClose={() => setIsTestModalOpen(false)} 
      />
      {/* Discard Modal */}
      {isDiscardModalOpen && (
        <div className="discard-modal">
          {/* 确认丢弃的内容 */}
        </div>
      )}
    </div>
  );
};

方案3：阻止遮罩层的鼠标/键盘事件冒泡 #

如果模态框带有背景遮罩，给遮罩层添加事件阻断逻辑，避免鼠标点击或键盘事件传递到父组件层级。

// TestModal组件的遮罩层部分
<div 
  className="modal-overlay"
  onClick={(e) => e.stopPropagation()} // 阻止点击事件冒泡
  onKeyDown={(e) => e.stopPropagation()} // 阻止键盘事件冒泡
  tabIndex={-1} // 让遮罩层可以捕获键盘事件
>
  <div className="modal-content" onKeyDown={handleKeyDown}>
    {/* 模态框内容 */}
  </div>
</div>

推荐实践 #

优先结合方案1 + 方案2使用：既在模态框内部阻断事件冒泡，又通过状态控制父组件的事件监听，形成双重保障，彻底避免事件冲突。

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