时间戳

首页 > 解决方案 > 将弹出窗口绑定到折线以在反应传单中出现 onMouseover

javascript - 将弹出窗口绑定到折线以在反应传单中出现 onMouseover

问题描述

我正在尝试获得一个在鼠标悬停时打开的折线弹出窗口。

我试过用静态值强制弹出属性的位置道具，但这似乎没有任何影响。我不确定当它绑定到另一个元素时是否可以设置这个值。如果弹出窗口是独立的代码笔，它似乎可以工作

我知道我可以设置一个函数以在鼠标悬停时执行，如此代码笔所示。

<Polyline positions={positions}
          onMouseOver={(event) => null}
>

但我不确定如何制作与此子组件交互的事件。

使用传单 1.4.0 react-leaflet 2.2.1 react 16.8.5 react-dom 16.8.5

标签： javascriptreactjsleafletreact-leaflet

解决方案

为了在将鼠标悬停在折线上时显示弹出窗口，您只需调用

<Polyline
    positions={positions}
    /*What should onMouseOver do?*/
    onMouseOver={e => e.target.openPopup()}>

可以选择添加onMouseOut={e => e.target.closePopup()}以在悬停后关闭弹出窗口

演示

推荐阅读