react hooks 点击空白区域隐藏组件

const [show, setShow] = useState(false)

useEffect(()=>{
  // 在 document 上绑定点击事件，隐藏弹出层
   document.addEventListener("click", (e) => setShow(false));
}, [])

// 封装后的阻止冒泡功能
const stopPropagation = (e: any) => {
    e.nativeEvent.stopImmediatePropagation();
}
const onShow = (e: any) => {
// 使用 react 的 e.stopPropagation 不能阻止冒泡，需要使用 e.nativeEvent.stopImmediatePropagation，这里我们对其进行封装，方便多次调用
    stopPropagation(e);
    setShow(!show)
 }

const contentBoxAttr = {
    className: cx({
      'content-box': true,
      'content-box-show': show
    }),
    // 方便的调用封装冒泡功能来阻止冒泡
    onClick: stopPropagation
  }

      
return (
    <div className="main-box-top">
        <div className="container-box" onClick={onShow}></div>
            <div {...contentBoxAttr}>
                <ul className="list">
                  /* 可以放自己的内容 */
                </ul>
          </div>
     </div>
</div>
);
   

 

 

原理: 在document上绑定点击事件，隐藏弹出层