1
votes

Meilleures pratiques de gestion des événements React Click

En apprenant à React, j'ai vu des gens gérer les événements différemment. Quelles sont les meilleures pratiques pour gérer les événements de clic?

Est-ce que c'est bien? Ajouter l'événement à l'objet de classe à appeler avec ceci?

import React from "react";

class Bar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render(){
    const handleClick = () => {
      //Do some stuff
    }

    return(
      <div onClick={handleClick}>
        Bar
      </div>)
  }
}

export default Bar;

Ou par ici? Pour avoir la fonction déclarée dans la "section" de rendu

import React from "react";

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    handleClick = handleClick.bind(this)
  }

  handleClick(){
    //Do some stuff
  }

  render(){

    return(
      <div onClick={this.handleClick}>
        Foo
      </div>)
  }
}

export default Foo;

Y a-t-il un meilleur moyen? Quel est le meilleur modèle de codage?

javascript reactjs class onclick events

0 commentaires

3 Réponses :

0
votes

Je n'ai pas vu la deuxième manière que vous mentionnez, et je ne recommanderais pas de le faire, car cela créera une nouvelle fonction pour chaque rendu.

La façon dont je le fais est comme ceci:

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  handleClick = () => {
    //Do some stuff
  }

  render(){

    return(
      <div onClick={this.handleClick}>
        Foo
      </div>)
  }
}

export default Foo;

De cette façon, vous n'avez pas besoin de la liaison dans le constructeur, mais la fonction n'est toujours créée qu'une seule fois.

1 commentaires

Beaucoup de code crée de nouvelles fonctions à chaque rendu. Avez-vous déjà utilisé

 {someArray.map (entry => ( entry.text 
))}

? :-) Le vrai problème avec la deuxième méthode est la testabilité.

0
votes

La documentation officielle react utilise:

class Bar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  handleClick = () => {
    //Do some stuff
  }

  render(){
    return(
      <div onClick={this.handleClick}>
        Bar
      </div>)
  }
}

export default Bar;

Mais je pense que c'est aussi mieux d'utiliser ce qui suit: import React from "react";

...
    handleClick = handleClick.bind(this)
...

Avec la deuxième méthode, vous ne vous souciez pas d'utiliser .bind () .

0 commentaires

0
votes

Votre première façon, en utilisant une fonction prototype que vous liez dans le constructeur, est bonne à part que vous manquez this:

class Bar extends React.Component {
    handleClick = event => {
        // ...
    };
}

Votre deuxième façon crée une nouvelle fonction sur chaque rendu, à l'intérieur de render . Cela rend difficile de se moquer de handleClick à des fins de test.

Une troisième façon que vous verrez souvent consiste à créer une fonction de flèche au moment de la construction, soit dans le constructeur: p >

this.handleClick = event => {
    // ...
};

ou en utilisant une déclaration de propriété:

this.handleClick = this.handleClick.bind(this);

Les deux ont le même problème de moquerie / testabilité.

À part ça, ils vont bien.

0 commentaires