Was ist der Unterschied zwischen diesen beiden Deklarationen in JavaScript?

Question

Ich bin mit der Klasse Syntax, um eine Komponente reagieren zu deklarieren:

import React, {Component} from 'react' 
class Page extends Component { 
    constructor(props) { 
     super(props) 
     this.state = {value: ''} 
    } 

    doA(event) {this.setState({value: event.target.value})} 

    doB = (event) => {this.setState({value: event.target.value})} 

    render { 
     return (
      <input type="text" onChange={this.doB}/> 

      {*the following is wrong:*} 
      {*<input type="text" onChange={this.doA}/>*} 
     ) 
    } 
} 

Wenn ich versuche, onChange mit doA zu handhaben, bekomme ich diesen Fehler: TypeError: Cannot read property 'setState' of undefined.

doA Die Deklaration sieht eher wie eine Klassenmethode aus Java aus und die doB Deklaration sieht eher wie eine anonyme Funktion aus, die einer Klasseneigenschaft zugewiesen ist. Ich hätte gedacht, mit onChange = this.doA würde this zugewiesen, um die Klasse, aber es ist umgekehrt. onChange = doB behält this zugewiesen der Klasse.

Ich habe versucht, nach Erklärungen zu suchen, aber ich kenne nicht die richtige Terminologie, daher meine Suchbegriffe sind schlecht.

Eine Randnotiz: Wenn ich onChange = doA verwende, bekomme ich diesen Fehler, aber das Eingabefeld wird immer noch korrekt aktualisiert. So ändert sich this.state.value, aber es gibt mir diesen Fehler. Warum das?

Answer 1

Arrow-Funktionen in JavaScript lexikalisch binden this für Sie. Das ist der Grund, doB funktioniert ordnungsgemäß, während doA nicht funktioniert.

Wenn Sie doA im constructor binden, werden die Dinge funktionieren als mit Klasse Syntax erwartet:

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