javascript - react javascript中的这两个声明有什么区别？

我正在使用类语法来声明一个react组件：

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

如果尝试使用onChange处理doA，则会出现此错误：TypeError: Cannot read property 'setState' of undefined。

doA的声明看起来更像Java中的类方法，而doB的声明看起来更像是分配给class属性的匿名函数。我本以为使用onChange = this.doA会将this分配给该类，但这是另一回事。 onChange = doB将this分配给该类。

我尝试搜索解释，但是我不知道正确的术语，因此搜索条件很差。

附带说明：如果使用onChange = doA，则会收到该错误，但输入字段仍将正确更新。所以this.state.value在变化，却给了我这个错误。这是为什么？

最佳答案

JavaScript中的箭头函数为您词法绑定this。这就是doB正常运行而doA不能正常运行的原因。

如果在doA中绑定constructor，则可以使用类语法按预期运行：

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