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

如果我尝试使用onChange处理doA，我会收到此错误：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无法正常工作的原因{/ 1}}。

如果您在doA中绑定doA，则使用类语法可以正常工作：

constructor

反应javascript中这两个声明有什么区别？

1 个答案: