J'ai un problème lorsque j'essaie de compiler mon application React.
Le problème est "Impossible de lire la propriété 'classList' de null".

Code:

import React, { Component } from "react";

class Nav extends Component {
  showMenu() {
    document.querySelector("#menu-icon").classList.toggle("is-active");
  }

  render() {
    return (
      <nav>
        <h4>Z-LINE Meble</h4>
        <button className="hamburger hamburger--spring" id="menu-icon" type="button" onClick={this.showMenu()}>
          <span className="hamburger-box">
            <span className="hamburger-inner" />
          </span>
        </button>
        {/* <h5>Oferta</h5>
        <h5>Realizacje</h5>
        <h5>O nas</h5>
        <h5>Kontakt</h5> */}
      </nav>
    );
  }
}

export default Nav;

Qu'est-ce qui ne va pas ?
- Alors que j'ai la fonction 'onClick' sur le bouton, il y a cette erreur (cliquez sur moi)
- S'il n'y a pas de fonction 'onClick', cela fonctionne en tapant le contenu showMenu() dans la console  (click me)



Savez-vous comment résoudre cela? Merci pour l'aide.

0
deivuss331 15 mars 2019 à 18:49

2 réponses

Meilleure réponse

Essaye ça

Une fonction:

  showMenu = () => {
        document.querySelector("#menu-icon").classList.toggle("is-active");
      }

Et bouton :

<button className="hamburger hamburger--spring" id="menu-icon" type="button" onClick={()=> this.showMenu()}>
0
Yusuf Altıparmak 15 mars 2019 à 15:53

Le problème réside dans votre écouteur onClick, comme l'indique la documentation : avec JSX, vous devez transmettre une fonction en tant que gestionnaire d'événements.

Mais quand tu utilises :

onClick={this.showMenu()}

Vous appelez la fonction avant que votre composant ne soit rendu, notez la parenthèse à la fin.

Ce que vous devriez faire n'est pas de l'appeler juste une fois que vous avez cliqué sur le bouton.

Vous avez deux possibilités : 1)

onClick={this.showMenu}

2) si vous devez passer un paramètre à la fonction

onClick={() => {this.showMenu()}}
0
Ruben Saucedo 15 mars 2019 à 16:24