Estoy tratando de crear un panel de administración y en el que tengo un menú de barra lateral. Creé un menú desplegable y funciona con el gancho useState pero no funciona como yo quería. Lo que quería es cuando hago clic en Clientes , por lo que si la declaración solo debería ejecutarse para sus hijos, no para todos los hijos hermanos.
const [isActive, setIsActive] = useState(false); const handleToggle = () => { setIsActive(!isActive) }A continuación se muestra el código desplegable.
<li> <a className={`${isActive?'open-sibling':'hidden-sibling'} left-menu-list`} onClick={handleToggle}> <i className="las la-user-alt mr-2"></i> <span>Clients</span> <i className="las la-angle-up ml-auto"></i> </a> <ul> <Link href="/clients/list"> <li> <a className="left-menu-list"> <i className="las la-users mr-2"></i> View All Clients </a> </li> </Link> </ul> </li>Encuentre el GIF de la salida: -
Aquí tienes una solución.
const [isActive, setIsActive] = useState({ status: false, key: "" }); const handleToggle = (key) => { if(isActive.key === key) { setIsActive({ status: false, key: "" }); } else { setIsActive({ status: true, key }); } } <li> <a className={`${isActive.key == 'client' ? 'open-sibling':'hidden-sibling'} left-menu-list`} onClick={() => handleToggle("client")}> <i className="las la-user-alt mr-2"></i> <span>Clients</span> <i className="las la-angle-up ml-auto"></i> </a> <ul> <Link href="/clients/list"> <li> <a className="left-menu-list"> <i className="las la-users mr-2"></i> View All Clients </a> </li> </Link> </ul> </li> Utilice el status y la key para ver los elementos secundarios.
Según este comentario ,
Este es el comportamiento esperado si se usa el mismo estado para todos los menús desplegables. Vea si puede usar un estado separado para cada menú. Me gusta,
const [isClientActive, setIsClientActive] = useState(false); const [isordersActive, setIsOrdersActive] = useState(false); const handleClientToggle = () => { setIsClientActive(!isClientActive) } const handleOrdersToggle = () => { setIsOrdersActive(!isordersActive) }o usar un objeto para almacenar en un solo lugar
const [isActive, setIsActive] = useState({client: false, order:false});