0
201
VistasHaga clic en OutSide co close sidebar reactjs
Creo una función cuando hago clic fuera de la barra lateral, la ocultará y también tengo un botón que alterna entre mostrar y ocultar la barra lateral. Pero cuando combiné ambos, el botón no funcionó correctamente, solo muestra la barra lateral pero no puede cerrarla, solo cuando hago clic afuera cerrará la barra lateral
Haga clic en OutSide para cerrar la función:
const ref = useRef(null); useEffect(() => { document.addEventListener("mousedown", Clickout); return () => { document.removeEventListener("mousedown", Clickout); }; }, []); const Clickout = (eve) => { if (ref.current && !ref.current.contains(eve.target)) { setShow(false); } };Mi regreso:
return ( <header> <div className="head"> <div className="logo"> <img src={logo} alt="logo" /> </div> <button className="burger" onClick={() => { setShow(!showMenu); console.log("here"); }} > <div className={`${showMenu ? "change" : ""} bur1 `}></div> <div className={`${showMenu ? "change" : ""} bur2 `}></div> <div className={`${showMenu ? "change" : ""} bur3 `}></div> </button> </div> <nav className={showMenu ? "active" : ""} ref={ref}> <ul> {navItem.map((item) => { const { id, url, text } = item; return ( <li key={id}> <a href={url}>{text}</a> </li> ); })} </ul> </nav> </header> ); };CSS de la barra de navegación:
nav { position: fixed; right: -100%; top: 0; width: 60%; height: 100vh; text-align: center; padding-top: 15vh; transition: 0.8s ease; background-color: blue; } nav.active { right: 0; transition: 0.5s; }Gracias.
2 Respuestas
Responde la pregunta0
puede usar otro estado para administrar el botón al hacer clic cuando el menú está abierto:
const [disableBtn, setDisableBtn] = useState(false);y en la función Clickout administrarlo:
const Clickout = (eve) => { if (showMenu && ref.current && !ref.current.contains(eve.target)) { setShow(false); setDisableBtn(true) } else { setDisableBtn(false) } };y en el botón para la condición de uso onclick:
if (!disableBtn) setShow(true);0
Actualizar el estado de esta manera setShow(!showMenu) no actualiza inmediatamente el estado. Más bien, programa la actualización (puede leer los documentos). Cuando su setState dependa de su estado anterior (en este caso, showMenu depende del estado anterior), use esta técnica: (prev) => setState(!prev) en su lugar. Entonces, simplemente actualizar su onClick resolverá el problema.
<button className="burger" onClick={() => { (prevShowMenu) => setShow(!prevShowMenu) }}>(Déjame saber en los comentarios si esto fue útil)