coopernet Réussir son site web et ses applications de la conception à la réalisation

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 :

1. //binder la méthode à this :
   constructor() {
     super();
      this.handleChangeQuestion = this.handleChangeQuestion.bind(this);
   }

2. //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