JS bind(), 두 개의 "this"컨텍스트가 필요합니다.

Question

이것은 일반적인 JS 질문입니다.

React-leaflet에서 콜백을 통해 이벤트를 처리하고 싶습니다. 호출 된 함수는 this.getZoom()과 같은 작업을 수행하는 데 사용할 수있는 호출자 (이벤트) 컨텍스트를 가져옵니다.

문제는 동시에 반응 요소 컨텍스트가 상태를 업데이트하고 다른 방법을 호출해야합니다.

"this.setState (...)"를 얻기 위해 "this.getZoom()"을 호출하려면 콜백이 바인드되지 않아야합니다. "this"에 콜백을 바인딩해야합니다.

그러나 호출자와 콜백 컨텍스트를 변수로 콜백에 전달하는 방법은 무엇입니까?

다른 유형으로이 문제가 해결 될 수 있습니까?

이 jsfiddle를 참조하십시오 https://jsfiddle.net/nf8k23s7/1/

Answer 1

e.target 이미 리플릿 요소입니다.

이

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

업데이트하여 바이올린 : 바인드에 https://jsfiddle.net/mrlew/nf8k23s7/2/

Answer 2

또한 사용할 수 있습니다 => 화살표 기능 결합을

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

을하고 잊지 마세요 :

그래서 당신은 사용할 수 있습니다 이

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


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