React Leaflet：标记组件的自定义事件 "onClick"

Question

我想为 'react-leaflet' 的 Marker 元素定义一个 React 组件。例如

import React,{useState} from 'react'
import {Marker,useMapEvent } from 'react-leaflet'
import fireIconSvg from './fire-icon.svg'

import L from "leaflet";

const OSLocationMarker = ( {position, onClick} ) => {

  const locationIcon = new L.Icon({
    iconUrl: fireIconSvg,
    iconRetinaUrl: fireIconSvg,
    iconAnchor: null,
    popupAnchor: null,
    shadowUrl: null,
    shadowSize: null,
    shadowAnchor: null,
    iconSize: new L.Point(35, 45),
    className: 'location-icon'
});

return (
      <Marker
        data="customdata"
        position={position}
        icon={locationIcon}
        onClick={onClick}
      >
      </Marker>
  );
}

export default OSLocationMarker;

通过这个我想在点击任何OSLocationMarker（有N个标记）时触发一个功能。 OSLocationMarker 获取回调函数作为 prop。这是行不通的。使用 useMapEvent() 传单挂钩我没有让它工作。为什么函数没有被调用？

Answer 1

onClick 在 react-leaflet v3 中不再起作用。 useMapEvent(s) 适用于 map 实例，不适用于 UI 组件，如 Marker。要在 Marker 上注册事件处理程序，您需要使用 eventHandlers 属性：

<Marker
  data="customdata"
  position={position}
  icon={locationIcon}
  eventHandlers={{ click: onClick }}
>
</Marker>

React Leaflet：标记组件的自定义事件 "onClick"

React Leaflet: Custom event "onClick" for Marker component

leaflet

reactjs

react-leaflet