[英]Registering event with react leaflet
I'm trying to incorporate React-Leaflet into my Create React App.我正在尝试将 React-Leaflet 合并到我的 Create React App 中。 I am able to overlay GeoJSON data on a base map, but I cannot register clicks on this layer.
我能够在底图上叠加 GeoJSON 数据,但我无法在该图层上注册点击次数。
In investigating this issue, I found the following jsfiddle, https://jsfiddle.net/n7jmqg1s/6/ , which registers events when the shapes are clicked as evidenced by the onEachFeature function:在调查这个问题时,我发现了以下 jsfiddle, https: //jsfiddle.net/n7jmqg1s/6/,它在形状被点击时注册事件,如 onEachFeature 函数所证明的那样:
onEachFeature(feature, layer) {
console.log(arguments)
const func = (e)=>{console.log("Click")};
layer.on({
click: func
});
}
I tried copying and pasting this into my react app, but it doesn't work there.我尝试将其复制并粘贴到我的 React 应用程序中,但在那里不起作用。 The only thing I changed was instead of window.React/window.LeafletReact I used the es6 import.
我唯一改变的是使用 es6 导入而不是 window.React/window.LeafletReact。 I don't this this would cause the issue, but I suppose it's possible.
我不认为这会导致问题,但我认为这是可能的。
I looked at the arguments from the onEachFeature function.我查看了 onEachFeature 函数的参数。 In the jsfiddle, I get 2 arguments--what look to be the feature and layer data.
在 jsfiddle 中,我得到 2 个参数——特征和图层数据。 In my copied example, however, I get 3 arguments the first two of which are empty and the third which contains an object with many things including (enqueueCallback : (publicInstance, callback, callerName))
但是,在我复制的示例中,我得到 3 个参数,其中前两个为空,第三个参数包含一个包含许多内容的对象,包括 (enqueueCallback : (publicInstance, callback, callerName))
I realize that this is somewhat vague, but I'm hoping that this issue is easily identifiable as a misunderstanding with React or leaflet.我意识到这有点含糊,但我希望这个问题很容易被识别为对 React 或传单的误解。 I think it has something to do with the fact that I'm not passing the right scope or manipulating the DOM directly or something.
我认为这与我没有传递正确的范围或直接操作 DOM 或其他事情有关。 But I'm not sure.
但我不确定。 I would greatly appreciate any help.
我将不胜感激任何帮助。
Here is my component code:这是我的组件代码:
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='© <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>
);
}
}
First you define your map in the render function :首先你在渲染函数中定义你的地图:
<LeafletMap
ref='map'>
<GeoJson
ref="geojson"
data={this.props.data}
onEachFeature={this.onEachFeature.bind(this)}
/>
</LeafletMap>
then you define an onEachFeature function listing all the listeners然后你定义一个 onEachFeature 函数列出所有的监听器
onEachFeature(feature, layer) {
layer.on({
mouseover: this.highlightFeature.bind(this),
mouseout: this.resetHighlight.bind(this),
click: this.clickToFeature.bind(this)
});
}
then you define each event handle function for example click function or mouse over然后定义每个事件处理函数,例如单击函数或鼠标悬停
clickToFeature(e) {
var layer = e.target;
console.log("I clicked on " + layer.feature.properties.name);
}
without seeing the Leaflet tag code and how you call onEachFeature, I can't really help with the ES6 example you have.如果没有看到 Leaflet 标记代码以及您如何调用 onEachFeature,我真的无法帮助您提供 ES6 示例。 It's possible that you do not call it like in the JSFiddle example
您可能不像在 JSFiddle 示例中那样称呼它
onEachFeature={this.onEachFeature}
For ES6 you should use this:对于 ES6,你应该使用这个:
onEachFeature = (feature, layer) => {
layer.on({
click: this.clickToFeature
});
}
Instead of this:取而代之的是:
onEachFeature = (feature, layer) => {
layer.on({
click: this.clickToFeature.bind(this)
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.