Pourquoi « this.setState » n'est-il pas défini ou n'est-il pas une fonction dans mon gestionnaire d'événements React ?

Accès à l'instance React (this) dans le gestionnaire d'événements

Problème :

Lors de la tentative de mettre à jour l'état React à l'aide de this.setState dans un gestionnaire d'événements, vous pouvez rencontrer des erreurs telles que "Cannot lire la propriété 'setState' de non défini" ou "this.setState n'est pas une fonction". Cela indique que le mot clé this ne fait pas référence à l'instance du composant dans le gestionnaire d'événements.

Explication :

Dans les composants ES6 React, les fonctions liées au composant doivent être définies dans le constructeur ou lié explicitement dans la méthode de rendu en utilisant this.methodName.bind(this). En effet, la syntaxe de la fonction flèche JavaScript (par exemple () =>) crée une nouvelle portée de fonction et ne la lie pas automatiquement au composant.

Solution :

Méthode 1 (reliure dans Constructeur) :

constructor(props) {
  super(props);
  this.state = { inputContent: 'startValue' };
  this.changeContent = this.changeContent.bind(this); // Binding here
}

Méthode 2 (liaison dans le rendu) :

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

Remarque : Lors de l'utilisation de React. createClass, toutes les méthodes sont automatiquement liées à l'instance du composant.

Supplémentaire Correction :

Dans votre code, React.refs.someref doit être remplacé par this.refs.someref pour accéder à la référence de l'élément React. De plus, la méthode sendContent doit être liée au composant à l'aide de l'une des méthodes de liaison ci-dessus.

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!