Wie kann ich „this' in React-Ereignishandlern richtig binden, um Kontextfehler zu vermeiden?

Diese Mehrdeutigkeit in React-Ereignishandlern verstehen

In React stellt die Bindung von Ereignishandlern an Komponenteninstanzen sicher, dass sie Zugriff auf diesen Kontext haben. Entwickler können jedoch auf Fehler stoßen, wenn sie versuchen, innerhalb einer Event-Handler-Funktion auf this.setState oder this.refs zuzugreifen. Dieses Problem ergibt sich aus der Unklarheit, wenn es implizit an eine Komponenteninstanz gebunden ist.

Um dieses Problem zu beheben, binden Sie Event-Handler-Funktionen an die Komponenteninstanz, bevor Sie sie als Requisiten übergeben. Dadurch wird sichergestellt, dass sich diese Variable im Funktionskörper auf die Komponenteninstanz und nicht auf das globale Fensterobjekt bezieht.

Bei Verwendung der ES6-Klassensyntax von React kann diese Bindung im Konstruktor erreicht werden über:

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

Alternativ werden Event-Handler mit der React.createClass-Methode automatisch an die Komponenteninstanz gebunden. Es ist jedoch wichtig zu beachten, dass:

• Durch das Binden einer Funktion wird eine neue Funktion erstellt. Erwägen Sie daher, sie im Konstruktor (wird einmal ausgelöst) oder direkt im Rendering (erstellt bei jedem Rendern eine neue Funktion) zu binden.

Beispiel-Konstruktorbindung:

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

Beispielrendering Bindung:

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

Außerdem verweisen Sie auf this.refs anstelle von React.refs, wenn Sie auf Komponentenverweise in Ereignishandlern zugreifen.

Das obige ist der detaillierte Inhalt vonWie kann ich „this' in React-Ereignishandlern richtig binden, um Kontextfehler zu vermeiden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!