Pourquoi et quand devrions-nous lier des fonctions et des gestionnaires d'événements dans React ?

Pourquoi et quand devrions-nous lier des fonctions et des gestionnaires d'événements dans React ?

Dans React, le contexte des méthodes de classe n'est pas lié par défaut. Lors de l'accès à l'état ou aux accessoires du composant dans ces méthodes, il est nécessaire de lier leur contexte.

Options de liaison de fonctions

Il existe plusieurs façons de lier des fonctions :

1. Liaison du constructeur :

class SomeClass extends Component {
  constructor() {
    super();
    this.someEventHandler = this.someEventHandler.bind(this);
  }

  someEventHandler(event) {}
}

2. Fonctions de la grosse flèche :

class SomeClass extends Component {
  someEventHandler = (event) => {
  };
}

3. Liaison de fonction Lambda en ligne :

onChange={(event) => this.someEventHandler(event)}

4. Liaison de méthode .bind() :

onChange={this.someEventHandler.bind(this)}

Options de liaison du gestionnaire d'événements

1. Liaison de fonction Lambda en ligne :

onChange={(event) => this.someEventHandler(event)}

2. Liaison de méthode .bind() :

onChange={this.someEventHandler.bind(this)}

Choisir la méthode de liaison

La méthode de liaison appropriée dépend de la structure du composant et de la fonctionnalité requise :

Pré-liaison (fonctions de liaison de constructeur ou de flèche grasse) :

• À utiliser lorsque la fonction a besoin d'accéder à l'état ou aux accessoires du composant.

Liaison d'exécution (liaison de fonction Lambda en ligne ou méthode .bind()) :

• À utiliser lorsque la fonction n'accède pas à l'état ou aux accessoires du composant.
• Permet d'ajouter des paramètres supplémentaires à être transmis au gestionnaire.

Passer des paramètres supplémentaires :

• Pour la pré-liaison, transmettez les paramètres en tant qu'arguments de fonction dans le constructeur ou utilisez fat fonctions fléchées avec des paramètres supplémentaires.
• Pour la liaison d'exécution, utilisez les fonctions lambda en ligne ou .bind() avec des paramètres supplémentaires.

Exemple d'utilisation

Dans le code fourni extrait :

render() {
  return <input onChange={this.someEventHandler.bind(this)} />;
}

Il s'agit d'une liaison d'exécution utilisant la méthode .bind(), qui lie le contexte de someEventHandler à l'instance du composant.

render() {
  return ;
}

Il s'agit d'une liaison d'exécution utilisant une fonction lambda en ligne, qui lie également le contexte de someEventHandler à l'instance du composant.

render() {
  return <input onChange={this.someEventHandler} />;
}

Il s'agit d'une liaison d'exécution sans aucun paramètre supplémentaire. Cependant, il est recommandé de pré-lier la fonction someEventHandler dans le constructeur ou d'utiliser une fonction de grosse flèche pour garantir que le contexte correct est maintenu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!