如何让图标按钮成为useClickAway hook的点击排除项以解决Overlay闪烁问题？

解决方案 #

react-use的useClickAway钩子支持通过第三个配置参数的filter函数，指定哪些点击事件不触发关闭逻辑。具体实现如下：

1. 给打开Overlay的图标按钮创建一个Ref：

import { useRef } from 'react';
import { useClickAway } from 'react-use';

// ...

const buttonRef = useRef(null);
const overlayRef = useRef(null);

2. 将Ref绑定到按钮元素：

<button ref={buttonRef} onClick={toggleOverlay}>
  打开Overlay
</button>

3. 修改useClickAway的调用，添加过滤逻辑：

useClickAway(overlayRef, hideOverlay, {
  filter: (event) => {
    // 若点击目标是按钮本身或其子元素，不执行hideOverlay
    return !buttonRef.current || !buttonRef.current.contains(event.target);
  }
});

原问题原因 #

之前用event.stopPropagation无效，是因为useClickAway监听的是document层面的点击事件，事件冒泡到document时，stopPropagation无法阻止这个监听触发，必须通过filter主动排除目标元素。

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