2

これは一般的な 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/

4

2 に答える 2

4

e.targetすでに Leaflet 要素です。

したがって、次を使用できます。

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

do bind を忘れないでください:

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

フィドルを更新しました: https://jsfiddle.net/mrlew/nf8k23s7/2/

于 2016-07-07T09:02:41.357 に答える
2

=> アロー関数を使用してこれをバインドすることもできます

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


<Map center={position} zoom={this.state.zoom} onMoveend={this.moveend}>
于 2016-07-07T09:14:58.783 に答える