JS bind(), мне нужны два «этих» контекста

Question

Это общий вопрос JS.

В справочном листе, я хочу обрабатывать события через обратные вызовы. Вызываемая функция получает контекст вызывающего (события), который можно использовать для создания таких вещей, как 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 (...)" Мне нужно связать обратный вызов с "этим".

Но как передать как caller, так и callback-контексты в качестве переменных для обратного вызова?

Возможно, проблема такого типа решена по-другому?

Смотреть это jsfiddle: https://jsfiddle.net/nf8k23s7/1/

Answer 1

e.target уже элемент листовка.

Таким образом, вы можете использовать:

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/

Answer 2

Вы также можете использовать функцию => стрелки, чтобы связать это

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


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