用反應小冊子註冊活動

Question

我正在嘗試將React-Leaflet合併到我的「創建反應」應用程序中。我可以在基礎地圖上覆蓋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））

我知道這有點含糊，但我希望這個問題很容易被識別爲與React或傳單的誤解。我認爲這與我沒有直接傳遞正確的範圍或操縱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這樣稱呼它

onEachFeature={this.onEachFeature}