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

Question

我正在使用类语法来声明 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}/>*}
        )
    }
}

如果我尝试使用 doA 处理 onChange，则会收到此错误: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 中的箭头函数按词法为您绑定(bind) this。这就是 doB 可以正常工作而 doA 不能正常工作的原因。

如果您在构造函数中绑定(bind)doA，则使用类语法将按预期工作:

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