Estaba creando una ventana de inicio de sesión emergente para mi proyecto de reacción y quería mostrarla cuando presiono el botón de inicio de sesión y cerrar cuando hago clic fuera del contenedor. El área exterior es en realidad un div principal que funciona como una superposición borrosa para su elemento secundario. Utilicé useState para controlar los valores booleanos y useRef hooks para controlar las propiedades de visualización como se muestra a continuación.

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

Dado que uso useState en el elemento principal, también afecta al elemento secundario, que es la ventana emergente y la cierra cada vez que hago clic en el elemento secundario. Intenté poner stopPropagation en el elemento secundario, pero impide algunos de mis enlaces, que forman parte del componente principal.

Como no encuentro una cura para este problema, utilizo otro enfoque que consiste en usar el detector de eventos window.onClick... vea el código a continuación

 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])

y funciona perfectamente bien. También utilizo el mismo enfoque en la barra de búsqueda y todo parece estar bien y la consola está limpia...

Debido a que soy un programador principiante, sigo preguntándome si es la forma correcta de hacerlo y si hay algún problema al usar el evento window.onclick en tales ocasiones.