ReactJS – Evénements et fonctions paramétrées

Exemple avec l’événement onClick d’un bouton

Imaginons qu’en cliquant sur notre bouton, un compteur s’incrémente et s’affiche à l’écran.

Pour cela, on va assigner à l’event onClick, une fonction qu’on nommera handleIncrement. L’appel de la fonction handleIncrement ne peut pas être paramétrée.

Autrement dit, on ne peut pas écrire


<button onClick={this.handleIncrement(number)}>INCREMENT</button>

Pour passer un paramètre à la fonction (handleIncrement(number)), 2 solutions :

I Hack

Écrire une fonction sans argument, qu’on va nommer doHandleIncrement. Dans le corps de cette fonction appeler la fonction avec argument.


handleIncrement = (number) => this.setState({ count: this.state.count + number });

doHandleIncrement = ()=>{
this.handleIncrement(number)
}

<button onClick={this.doHandleIncrement}>INCREMENT</button>

II Meilleur solution

Ecrire ‘inline’ la fonction dont le corp possède la fonction avec argument.

De cette manière on évite de ré-écrire à chaque fois une fonction non paramétrée qui encapsule la fonction paramétrée.

Leave a Reply

Your email address will not be published. Required fields are marked *