Appel d'une fonction de gestion d'événement
Lorsque l’on veut appeler une fonction via un événement à l’intérieur d’un objet React, on ne peut pas appeler directement la fonction (handeIncrement() par exemple). Il faut passer par la référence à la fonction (handeIncrement sans les parenthèses). Cela empêche de passer des paramètres.
L’astuce est de passer par une fonction anonyme dans laquelle on aura le droit de faire appel normalement à une fonction en lui passant des paramètres.
Ex :
<button onClick={(e) => { this.handleIncrement(e,param); }} >
Attention, il est d'usage (comme nous l'avons vu avec les événements js) de donner en premier paramètre du gestionnaire d'événement l'objet event .
This et les événements
Par défaut, les fonctions appelées depuis un événement dans le code jsx (voir plus bas) n’ont pas accès au this
2 solutions
Première solution : binder la fonction dans le constructeur :
constructor() { super(); this.handleChangeQuestion = this.handleChangeQuestion.bind(this); } handleChangeQuestion() { console.log("Increment clicked" + this); }'
Variante de la première solution : binder au sein du JSX :
<button onClick={this.handleChangeQuestion.bind(this)}>Modifier la question</button>
Deuxième solution : utiliser une arrow function :
handleChangeQuestion = () => console.log("handleChangeQuestion clicked" );
render() { return ( <React.Fragment> <button onClick={this.handleChangeQuestion}
Gestion des formulaires
La documentation officielle de React en ligne nous donne une solution pour gérer les formulaires :
render() { return ( <form onSubmit={this.handleSubmit}> <label> Question : <input type="text" value={this.state.question} onChange={this.handleChangeQuestion} /> </label> <input type="submit" value="Modifier" /> </form> ); }
Attention car le this dans handleChangeQuestion ne fera référence si elle est déclarée de façon classique pour une classe (cf ci-dessous) à aucun objet car nous sommes en mode "strict".
handleChangeQuestion() { }
Pour que handleChangeQuestion connaisse le this représentant le "component", 2 solutions :
-
//binder la méthode à this : constructor() { super(); this.handleChangeQuestion = this.handleChangeQuestion.bind(this); }
-
//utiliser les arrow function : handleChangeQuestion = () => { };
Pour récupérer le formulaire dans le gestionnaire d'événement, il peut être intéressant de passer par la propriété "target" de l'objet "event" comme indiqué dans le cours js