Warum ist „this.setState' undefiniert oder keine Funktion in meinem React-Ereignishandler?

Zugriff auf die React-Instanz (dies) im Event-Handler

Problem:

Beim Versuch Aktualisieren Sie den React-Status mithilfe von this.setState innerhalb eines Event-Handlers. Möglicherweise treten Fehler wie "Kann nicht" auf Eigenschaft 'setState' von undefiniert lesen oder „this.setState ist keine Funktion“. Dies weist darauf hin, dass dieses Schlüsselwort nicht auf die Komponenteninstanz im Ereignishandler verweist.

Erklärung:

In ES6 React-Komponenten sollten an die Komponente gebundene Funktionen darin definiert werden den Konstruktor oder explizit in der Render-Methode mit this.methodName.bind(this) gebunden. Dies liegt daran, dass die JavaScript-Pfeilfunktionssyntax (z. B. () =>) einen neuen Funktionsumfang erstellt und diesen nicht automatisch an die Komponente bindet.

Lösung:

Methode 1 (Einbinden Konstruktor):

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

Methode 2 (Bindung im Rendering):

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

Hinweis: Bei Verwendung von React. createClass, alle Methoden werden automatisch an die Komponenteninstanz gebunden.

Zusätzlich Korrektur:

In Ihrem Code sollte React.refs.someref durch this.refs.someref ersetzt werden, um auf die React-Elementreferenz zuzugreifen. Außerdem muss die sendContent-Methode mithilfe einer der oben genannten Bindungsmethoden an die Komponente gebunden werden.

Das obige ist der detaillierte Inhalt vonWarum ist „this.setState' undefiniert oder keine Funktion in meinem React-Ereignishandler?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!