Creé un menú de hamburguesas que cambia el nombre de la clase cuando se hace clic en un botón. Esto funciona
const Hamburger = ()=> { const [show, setShow] = useState(false); function showIt() { setShow(!show); } return ( <HamburgerIcon className={show ? 'menu-open' : ' menu-close '} onClick={showIt}> <span></span> </HamburgerIcon> ) } export default Hamburger;El estado predeterminado para la hamburguesa es ".menu-close" si hace clic en alternar a ".menu-open". Pero cuando hago clic en un enlace dentro del menú, el menú permanece abierto.
Lo que quiero lograr es cambiar la clase también si se hace clic en un enlace en el menú.
¿Alguna sugerencia sobre lo que debo hacer aquí?
¡¡Gracias!!
Agregue la función showIt al enlace dentro del menú
Código:
const Hamburger = ()=> { const [show, setShow] = useState(false); function showIt() { setShow(!show); } return ( <HamburgerIcon className={show ? 'menu-open' : ' menu-close '} onClick={showIt}> <a href="/some/path" onClick={showIt}> Example </a> </HamburgerIcon> ) } export default Hamburger;Puede elevar el estado hasta el componente principal.
En el siguiente ejemplo, elevé el estado hasta el componente ancestro común más bajo de los componentes Menu y Hamburger . Y luego pasó al estado a través de accesorios.
function Hamburger({ isOpen, onClick }) { return <button onClick={onClick}>Menu {isOpen ? "↓" : "→"}</button>; } function Menu({ isOpen, menuItems, onClick }) { if (!isOpen) { return null; } return ( <ul> {menuItems.map((item, index) => ( <li key={index}> <button onClick={onClick}>{item}</button> </li> ))} </ul> ); } function App() { const [isOpen, setIsOpen] = React.useState(false); const handleClick = () => setIsOpen(!isOpen); return ( <nav> <Hamburger isOpen={isOpen} onClick={handleClick} /> <Menu isOpen={isOpen} onClick={handleClick} menuItems={["Home", "About", "Contact"]} /> </nav> ); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <React.StrictMode> <App /> </React.StrictMode> ); ul { list-style: none; } <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <div id="root"></div>