這兩個聲明在反應JavaScript之間有什麼區別？

Question

我使用的是類的語法來聲明一個反應成分：

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}/>*} 
     ) 
    } 
} 

如果我嘗試使用doAonChange來處理，我得到這個錯誤：TypeError: Cannot read property 'setState' of undefined。

doA的聲明看起來更像Java中的類方法，並且doB的聲明看起來更像是分配給類屬性的匿名函數。我本來以爲onChange = this.doA會保留this分配給這個班級，但這是相反的。 onChange = doB保留this分配給該類。

我試着尋找解釋，但我不知道正確的術語，因此我的搜索條件很差。

附註：如果我使用onChange = doA，則會出現該錯誤，但輸入字段仍然會正確更新。所以this.state.value正在改變，但它給了我這個錯誤。這是爲什麼？

Answer 1

JavaScript中的箭頭函數在詞彙上爲您綁定this。這就是doB正常工作的原因，而doA沒有。

如果您在constructor結合doA，如使用類語法預期的事情會：

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