JS bind()，我需要两个 "this" 上下文

Question

这是一个通用的 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.
}

问题是我同时需要反应元素上下文来更新状态和调用其他方法。

要实现 "this.getZoom()" 回调不应绑定，要实现 "this.setState(...)" 我需要将回调绑定到 "this"。

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

或者这种类型的问题是否可以通过其他方式解决？

查看这个 jsfiddle：https://jsfiddle.net/nf8k23s7/1/

Answer 1

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)}>

更新了您的 fiddle：https://jsfiddle.net/mrlew/nf8k23s7/2/

Answer 2

你也可以使用=>箭头函数来绑定这个

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


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

JS bind()，我需要两个 "this" 上下文

JS bind(), I need two "this" contexts

javascript

react-leaflet