反应传单鼠标悬停/悬停弹出窗口

Question

嘿嘿！

我希望通过悬停/鼠标悬停打开弹出窗口。

我尝试了推荐的但它仍然只能在单击时打开。有人知道缺少什么吗？

任何帮助表示赞赏！

import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import L from 'leaflet';

const Map = () => {
    const renderIcons = () => {
    return(
        <Marker
         position = {[latitude, longitude]}
         icon     = {getIcon(markerType)}
         onMouseOver = {event => event.target.openPopup()}
        >
            <Popup>
             Hello 
            </Popup>
        </Marker>
     );
});
return(
    <MapContainer ...>
       <TileLayer .../>
       {renderIcons()}
    </MapContainer>
 );
}

Answer 1

它可以在没有事件处理程序的情况下完成useMemo，useRef但仍然使用事件处理程序：

<Marker
  position={[latitude, longitude]}
  icon={getIcon(markerType)}
  eventHandlers={{
    mouseover: (event) => event.target.openPopup(),
  }}
>
  <Popup>Hello</Popup>
</Marker>;

Answer 2

您需要创建一个自定义组件，然后一种方法是使用eventHandlers处理mouseover和mouseout事件与标记引用相结合，分别调用传单的本机openPopup和closePopup方法。

const RenderIcons = () => {
  const markerRef = useRef();

  const eventHandlers = useMemo(
    () => ({
      mouseover() {
        if (markerRef) markerRef.current.openPopup();
      },
      mouseout() {
        if (markerRef) markerRef.current.closePopup();
      }
    }),
    []
  );

  return (
    <Marker
      ref={markerRef}
      position={position}
      icon={icon}
      eventHandlers={eventHandlers}
    >
      <Popup>Hello</Popup>
    </Marker>
  );
}; 

演示