javascript - React - 使用 window.onClick 事件监听器导航元素

Question

我正在为我的 react 项目构建一个弹出式登录窗口，我想在按下登录按钮时显示它，并在我单击容器外部时关闭它。外部区域实际上是一个父 div，它作为其子元素的模糊覆盖。我使用 useState 来控制布尔值，使用 useRef 挂钩来控制显示属性，如下所示。

<overlay onClick={()=>setPopupActive(false)}>
  <popup-window ref={displayPopupRef}>...some codes...</popup-window>..it only displays when the state is true
</overlay>

由于我在父元素上使用 useState，它也会影响作为弹出窗口的子元素，并在我单击子元素时将其关闭。我试图将 stopPropagation 放在孩子身上，但它阻止了我的一些链接，这些链接是父组件的一部分。

由于我找不到解决此问题的方法，因此我使用了另一种方法，即使用 window.onClick 事件侦听器...请参阅下面的代码

useEffect(() => {
    window.onclick = (e) => {
        if (e.target.className === 'login-btn') 
        return  displayPopupRef.current.style.display = 'grid'
        if(['login-container-overlay','close-button'].includes(e.target.className))
        return displayPopupRef.current.style.display = 'none'
    }
}, [displayPopupRef])

它工作得很好。我也在搜索栏上使用相同的方法，everythink 似乎没问题，控制台很干净......

由于我是初学者程序员的原因，我一直想知道这是否是正确的做法，在这种情况下使用 window.onclick 事件是否有任何问题。

标签： javascriptreactjs