Pregunta simple, estoy renderizando dinámicamente Polygons usando react-leaflet .
Los polígonos aparecen como se esperaba. Sin embargo, lo que adjunte a eventHandlers no funciona.
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"); } }} /> ); });¿Por qué es así y cómo lo soluciono?
Violín completo: https://codesandbox.io/s/scratchpad-without-geojson-b8jsp5
El sandbox que publicó está usando la versión 2 react-leaflet . La versión 2 maneja los eventos de manera diferente. Un accesorio onClick simple funcionará. Para los otros controladores, puede usar onMouseEnter o onMouseOut :
<Polygon key={index} positions={feature.geometry.coordinates} onClick={() => console.log("this works")} onMouseenter={highlightFeature} onMouseut={(e) => console.log(e)} />Sin embargo, recomiendo actualizar a react-leaflet v3.