Tengo este componente de reacción y estoy tratando de crear un menú de hamburguesas, pero no sé cómo agregar una clase cuando se hace clic en un botón. Soy nuevo en React, así que por favor sean fáciles conmigo. Cuando ejecuto el siguiente código, no funciona y arroja un error en las herramientas de desarrollo de Chrome.
function Nav() { const hamburger = document.getElementById('hamburger'); const navUL = document.getElementById('navul'); hamburger.addEventListener('click', () =>{ navUL.classList.toggle('show'); }); return ( <header> <h2> <a href="/"> Travis Helms </a> </h2> <nav> <ul className="flex-row" id='navul'> <li className="mx-2"> <a href="#about"> About me </a> </li> <li> <span>Portfolio</span> </li> <li> <span>Contact</span> </li> <li> <span>Resume</span> </li> </ul> </nav> <button className="hamburger" id="hamburger"> <FontAwesomeIcon icon={faBars}></FontAwesomeIcon> </button> </header> ); }Está bien. Así que fui a un tutor y trabajé con ellos para encontrar esta solución para alternar mi menú de hamburguesas. Solo pensé en agregar esta respuesta para el beneficio de otros programadores principiantes de React.
import React,{ useState } from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faBars } from '@fortawesome/free-solid-svg-icons'; function Nav(props) { const [navClass, setnavClass]= useState("flex-row"); const [toggledNav, settoggledNav]= useState(true); const addClass=() => { if (toggledNav){ setnavClass("flex-row show"); settoggledNav(false); }else { setnavClass("flex-row"); settoggledNav(true); } } return ( <header> <h2> <a href="/"> Travis Helms </a> </h2> <nav> <ul className={navClass} id='navul'> <li className="mx-2"> <a href="#about"> About me </a> </li> <li> <span>Portfolio</span> </li> <li> <span onClick={() => props.setmenuSelect(1)}>Contact</span> </li> <li> <span>Resume</span> </li> </ul> </nav> <button onClick={addClass} className="hamburger" id="hamburger"> <FontAwesomeIcon icon={faBars}></FontAwesomeIcon> </button> </header> ); } export default Nav;En primer lugar, ¡bienvenido a React! ¡Es un marco increíble!
Hubiera sido más útil si proporcionara el error que está recibiendo, pero a partir del código que compartió, puedo ver que hay algunas cosas que debe hacer de manera diferente.
En general, puede usar detectores de eventos en React para ciertas cosas, y hay una cierta manera de agregarlos correctamente, pero en su mayor parte no se usan con mucha frecuencia. En cambio, por ejemplo, para asignar un evento de clic a un elemento en React, todo lo que necesita hacer es pasarle el atributo onClick con la función que desea que ejecute cuando se haga clic en él, por ejemplo <button onClick={doSomething}>click me</button> .
Una manera fácil de controlar el estado de su componente es usar el useState y alternar la clase de un elemento usando el estado. En tu caso, podría verse así:
import React, { useState } from 'react'; const Nav = () => { const [isOpen, setIsOpen] = useState(false); return ( <header> <h2> <a href="/">Travis Helms</a> </h2> <nav> <ul className={"flex-row " + (isOpen ? "show" : "")}> <li className="mx-2"> <a href="#about">About me</a> </li> <li> <span>Portfolio</span> </li> <li> <span>Contact</span> </li> <li> <span>Resume</span> </li> </ul> </nav> <button className="hamburger" onClick={() => setIsOpen(!isOpen)} > <FontAwesomeIcon icon={faBars}></FontAwesomeIcon> </button> </header> ); };Parece que estás en una etapa muy temprana de aprendizaje de React y para que tengas éxito en la codificación con React, necesitas cubrir algunos conceptos básicos como administración de estado, accesorios, niños y algunas cosas más. ¡Recomendaría ir a YouTube y encontrar un buen video de introducción a React y codificarlo! Hay muchos recursos excelentes para las personas que recién comienzan con React, solo asegúrese de que sea algo bastante reciente (yo diría que 2020 en adelante).