react 实现 ClickOutside 组件

今天使用react封装一个组件

1. 首先看一下简单的页面demo, 我要实现一个点击盒子内部展示下面列表，点击盒子外部隐藏列表，我们先把下面列表隐藏掉。

2. 

3. 看一下

接下来封装一个组件 重点重点重点

export const ClickOutside = ({
  children,
  onOutsideClick,
}) => {
  const wrapperRef = useRef(null);

  useEffect(() => {
    /**
     * 处理点击事件
     */
    const handleClickOutside = (event: any) => {
      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
        onOutsideClick();
        event.stopPropagation();
      }
    };

    /**
     * 绑定事件监听器
     */
    document.addEventListener("click", handleClickOutside);

    /**
     * 解绑事件监听器
     */
    return () => {
      document.removeEventListener("click", handleClickOutside);
    };
  }, [onOutsideClick]);

  return 
{children}
;
};

使用方法

我们使用封装的组件包裹我们需要的div，onOutsideClick是点击外部的时候触发的方法

 const [show, setShow] = useState(false);

 {
          setShow(false);
        }}
      >
        
 {
            setShow(true);
          }}
        >
          盒子内部
        
      
      

        {show && (
          

            
1
            
2
            
3
            
4
            
5
          
        )}
      

效果