0
104
Visualizações¿Cómo cerrar el menú desplegable usando el propio gancho useOnOutsideClick?
Enfrenté un problema con el menú desplegable de mi móvil. Me gustaría cerrar el menú desplegable haciendo clic fuera (en algún lugar, digamos en los títulos anteriores) de mi botón y elementos desplegables.
Este es mi ejemplo .
Menú
const Menu = () => { const [isMobileNavOpen, setMobileNavState] = useState(false); const mobileNavRef = useRef(); useOnOutsideClick(mobileNavRef, () => { if (isMobileNavOpen) setMobileNavState(false); }); const toggleMobileNav = () => { setMobileNavState(!isMobileNavOpen); }; return ( <div> <div className="dropdown" ref={mobileNavRef}> <button className="dropdown-btn" onClick={toggleMobileNav} type="button" > DROPDOWN BUTTON </button> {isMobileNavOpen && ( <div className="dropdown-menu" onClick={() => setMobileNavState(false)} > <a className="dropdown-item" href="#"> Item1 </a> <a className="dropdown-item" href="#"> Item2 </a> </div> )} </div> </div> ); };mi anzuelo useOnClickOutside
export const useOnOutsideClick = (ref, callback) => { const handleClick = (e) => { if (ref.current && ref.current.contains(e.target)) { callback(); console.log("click"); } }; useEffect(() => { document.addEventListener("click", handleClick); return () => { document.removeEventListener("click", handleClick); }; }); };Por favor acerca de cualquier ayuda!
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
Voltee la lógica de contenido de su gancho useOutsideClick . Desea verificar si el evento de clic se originó fuera del elemento de destino al que está adjunta la referencia.
const handleClick = (e) => { if (!ref.current?.contains(e.target)) { callback(); console.log("click"); } }; 
anzuelo entero
export const useOnOutsideClick = (ref, callback) => { const handleClick = (e) => { if (!ref.current?.contains(e.target)) { callback(); console.log("click"); } }; useEffect(() => { document.addEventListener("click", handleClick); return () => { document.removeEventListener("click", handleClick); }; }); };
·
Juan Pablo Isaza
Relatório
Responde à pergunta