No estoy muy seguro de por qué el evento de clic no funciona. Simplemente intento usar una navegación accesible receptiva, pero parece que me falta algo en el constructor o no estoy activando la función correctamente. Tengo la sensación de que mi constructor es6 no está bien. Por favor, hágamelo saber si me puede ayudar
import React, { Component} from "react"; import {hot} from "react-hot-loader"; import { Link } from "react-router-dom"; import "../styles/navbar.scss" import cart from '../assets/images/cart.png' class NavBar extends Component{ constructor(props){ super(props); this.responsiveNav = this.responsiveNav.bind(this); } responsiveNav(){ const primaryNav = document.querySelector(".nav-items"); const navToggle = document.querySelector(".mobile-nav-toggle"); navToggle.addEventListener("click", () => { console.log('click') const visibility = primaryNav.getAttribute("data-visible"); if (visibility === "false") { primaryNav.setAttribute("data-visible", true); navToggle.setAttribute("aria-expanded", true); } else if (visibility === "true") { primaryNav.setAttribute("data-visible", false); navToggle.setAttribute("aria-expanded", false); } }); } render(){ return( <div id={this.props.id} className="navbar"> <button className="mobile-nav-toggle" aria-controls="nav-items" aria-expanded="false"> <span className="sr-only">Menu</span> </button> <nav className="nav"> <div className="nav-menu flex-row"> <div className="nav-brand"> <h2><Link to="/">APP</Link></h2> </div> <ul className="menu" data-visible="false" className="primary-nav flex"> <li> <Link to="/">Products</Link> </li> <li> <Link to="/">News</Link> </li> <li> <Link to="/">Content</Link> </li> <li> <Link to="/cart"><img src={cart} alt="cart icon"/><div id="yourcart">Your Cart</div></Link> </li> </ul> </div> </nav> </div> ); } } export default hot(module)(NavBar);Tienes algunas cosas que hacer aquí. Primero, use state para administrar visible . Su uso del atributo de data hace que parezca que proviene de un fondo similar a jQuery, y las cosas se hacen de manera un poco diferente en React. En segundo lugar, el desarrollo moderno de React usa componentes de función sobre clases. Las clases aún se admiten, por compatibilidad con versiones anteriores, pero eventualmente desaparecerán.
No sé acerca de su hoja de estilo, pero supongo que está activando su atributo aria-expanded para determinar si el menú realmente se muestra a través de CSS. Siendo ese el caso, su NavBar se convierte en algo como esto.
import React, { useState } from "react"; import { Link } from "react-router-dom"; import "../styles/navbar.scss"; import cart from "../assets/images/cart.png"; export default function NavBar() { const [visible, setVisible] = useState(false); const onClick = () => setVisible((prev) => !prev); return ( <div id={this.props.id} className="navbar"> <button id="menucontrol" className="mobile-nav-toggle" aria-haspopup="menu" aria-controls="nav-items" aria-expanded={visible} onClick={onClick} > <span className="sr-only">Menu</span> </button> <nav className="nav"> <div className="nav-menu flex-row"> <div className="nav-brand"> <h2> <Link to="/">APP</Link> </h2> </div> <ul className="menu primary-nav flex" id="nav-items" aria-expanded={visible} aria-labelledby="menucontrol" > <li> <Link to="/">Products</Link> </li> <li> <Link to="/">News</Link> </li> <li> <Link to="/">Content</Link> </li> <li> <Link to="/cart"> <img src={cart} alt="cart icon" /> <div id="yourcart">Your Cart</div> </Link> </li> </ul> </div> </nav> </div> ); } Puede ver aquí que he predeterminado su visibilidad en false , y alterne su estado al hacer clic en el botón (supongo que su cambio de enrutamiento eliminará el menú por completo, o tendría que alternar el cambio de ruta también). También amplié su código aria para reflejar el ejemplo W3C de este tipo de componente.
Esto no está usando su cargador de módulo caliente solo porque no estoy familiarizado con su uso en producción.