Question

语言：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？

Answer 1

有同样的问题。事实证明，Babel加载程序（在我的情况下，使用预设的'@ babel / preset-env'）没有将箭头功能绑定到该功能上。

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

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

Answer 2

做了一些改动：
箭头函数不绑定this关键字。这就是他们的工作方式。如果您需要使用this关键字，则需要使用bind功能。使用带箭头功能的绑定也可能很奇怪。您可能需要执行以下操作：

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

}

React / ES6：Arrow函数未按预期绑定“this”

2 个答案: