React-Bootstrap Modals导致window点击事件监听功能异常问题求助

问题根源 #

这个问题的核心是事件冒泡时序和React Bootstrap Modal的事件监听机制共同导致的：

• React 16 版本中所有合成事件默认挂载在document节点，未打开Modal时，按钮点击的合成事件触发完成、你给document添加原生点击监听的时机，刚好晚于本次点击原生事件冒泡到document的时机，所以本次点击不会触发刚添加的toggleInfo，功能正常。
• React Bootstrap Modal默认会给document添加捕获阶段的点击事件用于实现点击蒙层关闭逻辑，打开Modal后会改变原生事件的触发时序，导致你点击按钮时，原生事件冒泡到document的时机晚于你添加监听的时机，刚加上的toggleInfo会被本次点击直接触发，出现一开就关的问题。

解决方案 #

下面是三个可直接落地的修复方案，任选其一即可：

方案1：阻止按钮点击事件冒泡 #

最简单的修复方式，在按钮点击回调里阻止事件向上冒泡到document，避免触发全局监听：

<Button onClick={(e) => {
  e.stopPropagation();
  toggleInfo();
}}>

方案2：全局点击事件增加目标判断 #

给toggleInfo增加点击目标判断，点击区域是控制按钮或者要显隐的div本身时，不执行关闭逻辑：

1. 先给按钮和要显隐的div绑定ref

const btnRef = useRef(null);
const infoDivRef = useRef(null);

2. 修改toggleInfo逻辑，同时优化useCallback依赖

const toggleInfo = React.useCallback((e) => {
  // 点击目标在按钮或信息div内部时，不触发关闭
  if (e?.target && (
    btnRef.current?.contains(e.target) 
    || infoDivRef.current?.contains(e.target)
  )) {
    return;
  }
  // 用函数式更新避免依赖showInfo
  setShowInfo(prev => !prev);
}, []);

3. 给对应元素绑定ref

<Button ref={btnRef} onClick={() => toggleInfo()}>
<div ref={infoDivRef} style={{display: showInfo ? 'block' : 'none'}}>
  你的内容
</div>

方案3：修改Modal的事件监听行为 #

如果不需要Modal点击外部关闭的功能，可以给Modal添加以下属性关闭对应的全局监听，也可以解决冲突：

<Modal
  backdrop="static"
  keyboard={false}
>
  {/* Modal内容 */}
</Modal>

内容的提问来源于stack exchange，提问作者krisjanis-a