Зарегистрировать событие с помощью рекламного листка

Question

Я пытаюсь включить React-Leaflet в свое приложение Create React. Я могу накладывать данные GeoJSON на базовую карту, но я не могу зарегистрировать клики на этом слое.

При исследовании этого вопроса, я нашел следующий jsfiddle, https://jsfiddle.net/n7jmqg1s/6/, который регистрирует события, когда формы защелкиваются, о чем свидетельствует функция onEachFeature:

onEachFeature(feature, layer) { 
console.log(arguments) 
const func = (e)=>{console.log("Click")}; 

layer.on({ 
    click: func 
}); 
} 

Я попытался скопировать и вставить это в моем реагировать приложение, но он там не работает. Единственное, что я изменил, было вместо window.React/window.LeafletReact. Я использовал импорт es6. Я этого не сделаю, но, полагаю, это возможно.

Я рассмотрел аргументы функции onEachFeature. В jsfiddle я получаю 2 аргумента - каковы будут характеристики и данные слоя. В моем скопированной примере, однако, я получаю 3 аргумента первые два из которых являются пустыми, а третий, который содержит объект с много вещей, в том числе (enqueueCallback : (publicInstance, обратный вызов, callerName))

Я понимаю, что это несколько расплывчато, но я надеюсь, что этот вопрос легко идентифицировать как недоразумение с Реагированием или брошюрой. Я думаю, что это имеет какое-то отношение к тому факту, что я не передаю правильную сферу действия или не манипулирую DOM напрямую или что-то в этом роде. Но я не уверен. Я был бы очень признателен за любую помощь.

Вот мой код компонента:

import React from 'react'; 
import { Map, TileLayer, Marker, Popup, GeoJSON } from 'react-leaflet'; 

export default class SimpleExample extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     lat: 51.505, 
     lng: -0.09, 
     zoom: 8, 
    }; 
    } 

onEachFeature = (feature, layer) => { 
    layer.on({ 
     click: this.clickToFeature.bind(this) 
    }); 
    } 

    clickToFeature = (e) => { 
    var layer = e.target; 
    console.log("I clicked on " ,layer.feature.properties.name); 

    } 

    render() { 
    const position = [this.state.lat, this.state.lng]; 
    const geojsonObject = { 
     'type': 'FeatureCollection', 
     'crs': { 
      'type': 'name', 
      'properties': { 
      'name': 'EPSG:3857' 
      } 
     }, 
     'features': [{ 
      'type': 'Feature', 
      'geometry': { 
      'type': 'MultiPolygon', 
      'coordinates': [ 
       [[[-0.09, 51.505], [-0.09, 51.59], [-0.12, 51.59], [-0.12, 51.505]]], 
       [[[-0.09, 51.305], [-0.09, 51.39], [-0.12, 51.39], [-0.12, 51.305]]] 
      ] 
      } 
     }] 
     }; 
    return (
     <Map center={position} zoom={this.state.zoom} ref='map'> 
     <TileLayer 
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
      url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' 
     /> 
     <GeoJSON 
      ref="geojson" 
      data={geojsonObject} 
      onEachFeature={this.onEachFeature} 
      /> 
     </Map> 
    ); 
    } 
} 

Answer 1

Сначала вы определяете карту в функции визуализации:

<LeafletMap 
     ref='map'> 
     <GeoJson 
     ref="geojson" 
     data={this.props.data} 
     onEachFeature={this.onEachFeature.bind(this)} 
     /> 
    </LeafletMap> 

тогда вы определяете функцию onEachFeature со списком всех слушателей

onEachFeature(feature, layer) { 
    layer.on({ 
     mouseover: this.highlightFeature.bind(this), 
     mouseout: this.resetHighlight.bind(this), 
     click: this.clickToFeature.bind(this) 
    }); 
    } 

, то вы определяете каждую функцию дескриптора события, например, функцию щелчка или мыши над

clickToFeature(e) { 
    var layer = e.target; 
    console.log("I clicked on " ,layer.feature.properties.name); 

    } 

, не видя код листовки тегов и как вы называете onEachFeature, я не могу помочь с примером ES6 у вас есть. Вполне возможно, что вы не называйте его, как в примере JSFiddle

onEachFeature={this.onEachFeature}