React/ES6：箭头函数未按预期绑定“this”答案

【问题标题】：React/ES6: Arrow Function not binding "this" as expectedReact/ES6：箭头函数未按预期绑定“this”
【发布时间】：2016-11-04 11:20:17
【问题描述】：

语言：React/JavaScript ES6

打包工具：Webpack(babel-loader 6.0.0)

涉及的其他库：传单

问题：

使用上下文this下面的函数绑定到我需要的组件。

之前：

componentDidMount: function() {

     map.on('draw:created', function(e){
        this.setState({someProp:propUpdate});
        featureGroup.addLayer(e.layer);
     }.bind(this));

    }

但是当我将它切换到使用我期望的箭头功能时等效绑定，但 this 更改为传单类 o.Class.extend.e - 留下 this.setState 未定义。

之后：

componentDidMount: function() {

    map.on('draw:created', (e) => {
        this.setState({someProp:propUpdate});
        featureGroup.addLayer(e.layer);
    });

}

问题：为什么使用箭头函数不等同于在我的情况下绑定this？

【问题讨论】：

参考stackoverflow.com/questions/38127635/…
@Rayon forEach 循环中的箭头函数示例没有提供任何线索，为什么我的异步回调失去了绑定范围。您是否建议“词法绑定”与 es5 绑定不同？
似乎是您的环境/转译器中的一个错误。尽管 Babel 应该可以正常工作。代码本身看起来不错。如果我们无法重现该问题，我怀疑我们能提供多少帮助。
到目前为止，我认为@FelixKling 可能是对的。 “反应”：“^0.14.0”，“webpack”：“^1.12.1”，“babel-core”：“^6.6.4”，“babel-loader”：“^6.2.4”，“babel” -polyfill”：“^6.9.1”，“babel-preset-es2015”：“^6.6.0”，“babel-preset-react”：“^6.5.0”，“babel-preset-stage-0” : "^6.5.0"
尝试升级到最新版本的 babel。

标签： javascript reactjs ecmascript-6 leaflet arrow-functions

【解决方案1】：

做了一些改动：
箭头函数不绑定 this 关键字。他们就是这样工作的。如果需要使用this关键字，则需要使用bind函数。使用带有箭头功能的绑定也可能很奇怪。你可能需要做这样的事情：

componentDidMount: function() {
    var thisKey = this;
    map.on('draw:created', (e) => {
        this.setState({someProp:propUpdate});
        featureGroup.addLayer(e.layer);
    }.bind(thisKey));

}

【讨论】：

【解决方案2】：

有同样的问题。结果是 Babel-loader（在我的例子中使用预设的 '@babel/preset-env'）并没有像预期的那样将箭头函数绑定到 this。

在我的 webpack 配置中使用这个插件添加了正确的绑定

plugins: [
  ['@babel/plugin-transform-arrow-functions', { 'spec': true }]
]

【讨论】：