React-leaflet GeoJSON `onClick`

Question

GeoJSON

组件似乎没有

onClick

处理程序，对于组件来说是全局的。 如果添加

onClick

，它会起作用，但 TypeScript 会触发错误。

示例代码：

import { GeoJSON } from "react-leaflet";
const MyComponent = () => (
    <GeoJSON
      key={id}
      onClick={console.log}
      data={geometry}
    />
)

同样的问题也适用于

style

顺便说一下，似乎没有办法拥有全局风格。 也许我应该使用

ref

？添加包装器

div

不起作用。

如何为

onClick

组件设置全局

GeoJSON

处理程序？

版本：

[email protected]

Answer 1

您应该在“onEachFeature”函数中添加点击处理程序，并将其传递给组件上的 prop：

 function onEachFeature(feature, layer){
      if(feature.properties){
        layer.bindPopup("Your text or whatever")
      }
      layer.on({
          mouseover: onMouseOver,
          mouseout: onMouseOut,
        click: zoomToFeature
      });
    }

<GeoJSON data={points} pointToLayer={pointToLayer} pathOptions={markerStyles} onEachFeature={onEachFeature}

Answer 2

我一问问题就找到了答案：是小写的

onclick

，而不是

onClick

。这不是常见的

onClick

道具。

但是我找不到任何明确的文档。

Answer 3

在 GeoJSON 组件中添加 eventHandler 属性

<GeoJSON eventHandlers={{click: handleGeoJSONClick}} ... />

function handleGeoJSONClick(event:LeafletEvent){
// your code
}