react传单多边形事件处理程序不工作

Question

简单的问题是，我正在使用react-leaflet动态渲染Polygons。

多边形将按预期显示。然而，无论我附加到eventHandlers上什么都不起作用。

const highlightFeature = (e) => {
console.log(e);
let layer = e.target;
layer.setStyle({
color: "black",
fillColor: "black"
});
};
let indents = [];
lightRailStop.features.map((feature, index) => {
indents.push(
<Polygon
positions={feature.geometry.coordinates}
clickable={true}
color={"red"}
stroke={false}
fillOpacity={0.45}
// This is not working!
eventHandlers={{
mouseover: highlightFeature,
click: () => {
console.log("marker clicked");
}
}}
/>
);
});

为什么会这样，我该如何解决？

全小提琴：https://codesandbox.io/s/scratchpad-without-geojson-b8jsp5

Answer 1

您发布的沙箱使用的是react-leaflet版本2。版本2以不同的方式处理事件。一个简单的onClick道具就可以了。对于其他处理程序，可以使用onMouseEnter或onMouseOut:

<Polygon
key={index}
positions={feature.geometry.coordinates}
onClick={() => console.log("this works")}
onMouseenter={highlightFeature}
onMouseut={(e) => console.log(e)}
/>

工作沙箱

不过，我确实建议更新react传单v3。