我必须在此方法中使用bind（this）吗？

Question

我正在尝试打开一个模态并用状态数据填充它。

根据我的理解，除了使用bind（this）之外，是否可以构造此方法？回调会成为一种选择吗？

showExclusionDialog: function(){

    if(!this.state.exclusionReasons) {
        if(!this.state.exclusionReasons) {
            ExclusionLookupService.getReasons(function(reasons){
                this.setState({exclusionReasons: reasons});
            }.bind(this));
        }
    }

    if(!this.state.exclusionTypes) {
        ExclusionLookupService.getTypes(function(types){
            this.setState({exclusionTypes: types});
        }.bind(this));
    }

    if(!this.state.exclusionSessions) {
        ExclusionLookupService.getSessions(function(sessions){
            this.setState({exclusionSessions: sessions});
        }.bind(this));
    }

    this.setState({exclusionDialogShow: true});

},

Answer 1

说到组件上下文，你有几个选择。

绑定此

在任何回调中强制使用.bind(this)函数的上下文作为组件。

ExclusionLookupService.getReasons(function(reasons){
  this.setState({exclusionReasons: reasons});
}.bind(this));

使用组件方法

而不是使用内联函数表达式，而是将回调移动到组件上的方法。这些方法的上下文在运行时自动绑定。

showExclusionDialog: function() {
  ExclusionLookupService.getReasons(this.handleReasons);
},
handleReasons: function(reasons) {
  this.setState({exclusionReasons: reasons});
}

Alias This

在父范围内再次引用它，然后在子视图中使用它。

var component = this;

ExclusionLookupService.getReasons(function(reasons){
  component.setState({exclusionReasons: reasons});
});

使用ES2015箭头功能

将函数表达式转换为箭头函数，它使用封闭范围内的this上下文。

ExclusionLookupService.getReasons(reasons => {
  this.setState({exclusionReasons: reasons});
});

注意：大多数ES5转发器会将其转换为 Alias this 语法。

使用ES2016绑定语法

::运算符有一个ES2016 proposal，它将LHS作为其上下文绑定到RHS上的函数。

ExclusionLookupService.getReasons(this::function(reasons){
  component.setState({exclusionReasons: reasons});
});

注意：大多数ES5转发器会将其转换为.bind(this)。