Comment puis-je lier correctement « ceci » dans les gestionnaires d'événements React pour éviter les erreurs de contexte ?

Comprendre cette ambiguïté dans les gestionnaires d'événements React

Dans React, lier les gestionnaires d'événements aux instances de composants garantit qu'ils ont accès à ce contexte. Cependant, les développeurs peuvent rencontrer des erreurs lorsqu'ils tentent d'accéder à this.setState ou this.refs dans une fonction de gestionnaire d'événements. Ce problème provient de l'ambiguïté autour de ce problème lorsqu'il est implicitement lié à une instance de composant.

Pour résoudre ce problème, liez les fonctions du gestionnaire d'événements à l'instance de composant avant de les transmettre en tant qu'accessoires. Cela garantit que la variable this dans le corps de la fonction fait référence à l'instance du composant et non à l'objet fenêtre global.

Lors de l'utilisation de la syntaxe de classe ES6 de React, cette liaison peut être réalisée dans le constructeur via :

constructor(props) {
  super(props);
  this.changeContent = this.changeContent.bind(this);
}

Alternativement, avec la méthode React.createClass, les gestionnaires d'événements sont automatiquement liés à l'instance du composant. Cependant, il est important de noter que :

• La liaison d'une fonction crée une nouvelle fonction, pensez donc à la lier dans le constructeur (se déclenche une fois) ou directement dans le rendu (crée une nouvelle fonction à chaque rendu).

Exemple de liaison de constructeur :

constructor() {
  this.changeContent = this.changeContent.bind(this);
}

Exemple de rendu Liaison :

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

De plus, faites référence à this.refs au lieu de React.refs lors de l'accès aux références de composants dans les gestionnaires d'événements.

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!