React.js 和箭头函数与普通函数 [重复]

【问题标题】：React.js and arrow functions vs normal functions [duplicate]React.js 和箭头函数与普通函数 [重复]
【发布时间】：2019-01-17 14:14:27
【问题描述】：

我正在开发一个 react.js 应用程序，我最初使用了有效的箭头功能，但出于好奇，我决定尝试正常功能，但正常功能不起作用。我认为他们都应该输出相同的东西，出了什么问题？

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

handleChange(event){
  this.setState({init: event.target.value})
}

【问题讨论】：

检查你正在使用的es版本。根据那个你应该使用语法。如果缺少必要的模块会给出错误

标签： javascript reactjs arrow-functions

【解决方案1】：

箭头函数和普通函数不等价。

这里有区别：

箭头函数没有自己绑定this，所以你的this.setState指的是YourClass.setState。
使用普通函数，需要将其绑定到类，以获得类的this引用。因此，当您调用 this.setState 时，实际上它指的是 YourFunction.setState()。

示例代码

class FancyComponent extends Component {
    handleChange(event) {
        this.setState({ event }) // `this` is instance of handleChange
    }

    handleChange = (event) => {
        this.setState({ event }) // `this` is instance of FancyComponent
    }
}

【讨论】：