0

Tengo un dropdown que contiene un botón para cerrar sesión, el dropdown lo muestro y lo oculto haciendo click en un botón en el header, pero necesito también ocultarlo cuando de click en cualquier parte de la página excepto el boton de logout, ¿Como puedo hacer esto? Hasta ahora tengo mi código así:


import React, {useState} from "react";
import "./HeaderBar.css";
import Logout_Icon from "../../assets/images/authorization/icons/close_app.svg";

function HeaderBar() {

 const [logoutVisible, setLogoutVisible] = useState(false);

 return (
   <header id="NavHead">
     <nav className="HeaderBar">       
       <button onClick={() => setLogoutVisible(!logoutVisible)}>Click</button>
       <ul style={{ display: logoutVisible ? "inline-flex" : "none" }}>
         <li>Cerrar sesión</li>
       </ul>
     </nav>
   </header>
 );
}

export default HeaderBar;


1
  • Hazlo escuchando todos los eventos click o de key del DOM, y si el seleccionado no es el que quieres lo escondes.
    – masterguru
    el 18 ene. 2022 a las 4:19

1 respuesta 1

0

No se si será la mejor forma pero lo conseguí asi. Use useState para cambiar el display en los estilos. Y un contenedor transparente que ocupe toda la vista, que adentro si tenga la lista con el logout. El display sería para ese contenedor, entonces cualquier click fuera de la lista lo oculta.

import React, {useState} from "react";
import "./HeaderBar.css";
import Logout_Icon from "../../assets/images/authorization/icons/close_app.svg";

const HeaderBar = () => {

  const [displayButtonLogout, setDisplayButtonLogout] = useState('none');
  const onDisplayLogout = () => {
    setDisplayButtonLogout(displayButtonLogout === 'none' ? 'block' : 'none');
  };

 return (
   <header id="NavHead">
     <nav className="HeaderBar">       
       <button onClick={onDisplayLogout}>Click</button>
       <div className='container' style={{ display= {displayButtonLogout}}>
         <ul className='list'>
           <li>Cerrar sesión</li>
         </ul>
       </div>
     </nav>
   </header>
 );
}

export default HeaderBar;
#NavHead {
  width: 100%;
  height: 60px;
  background-color: lightblue;
}

.button {
  position: relative;
  height: 30px;
}

.container, .list {
  position: absolute;
  display: none;
  top: 30px;
  left: 0;
  width: 100%;
  height: 100vh;
}

.list {
  width: 150px;
  height: 80px;
  background-color: blue;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.