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上綁定點擊事件，隱藏彈出層