JS bind(),我需要两个“this”上下文

时间:2016-07-07 08:45:22

标签: javascript react-leaflet

这是一个通用的JS问题。

在React-leaflet中,我想通过回调来处理事件。被调用的函数获取调用者(事件)上下文,可用于执行this.getZoom()之类的操作。

onMoveend={this.moveend}

moveend(e){
    // e is the event target
    var zoomText = this.getZoom();
    // this.setState({zoomText: zoomText});  <-- "this" is the map object, not the my React component.
}

问题在于我需要react元素上下文来更新状态并调用其他方法。

要实现“this.getZoom()”,不应该绑定回调,要实现“this.setState(...)”我需要将回调绑定到“this”。

但是如何将调用者和回调上下文作为变量传递给回调?

或者可能是这种问题以另一种方式解决了?

请参阅此jsfiddle:https://jsfiddle.net/nf8k23s7/1/

2 个答案:

答案 0 :(得分:4)

e.target已经是Leaflet元素。

所以你可以使用:

moveend(e){
    var zoomText = e.target.getZoom();
    this.setState({zoomText: zoomText});
}

并且不要忘记做绑定:

<Map center={position} zoom={this.state.zoom} onMoveend={this.moveend.bind(this)}>

更新了您的小提琴:https://jsfiddle.net/mrlew/nf8k23s7/2/

答案 1 :(得分:2)

你也可以使用=&gt;用于绑定此

的箭头功能
moveend = (e) => {
  var zoomText = e.target.getZoom();
  this.setState({zoomText: zoomText}); 
}


<Map center={position} zoom={this.state.zoom} onMoveend={this.moveend}>