如何停止 MapContainer 子级的自定义 React 组件的点击传播

Question

我已经为地图创建了一个自定义控件反应组件，如下所示：

export const MapZoom = () => {
    const map = useMap()
    const handleButtonClick = () => {
        map.zoomIn()
    }

    return (
        <IconButton
            aria-label="clear all figures"
            bgColor="#ffffffe2"
            color="balck"
            onClick={handleButtonClick}
            icon={<FaPlus />}
        />
    )
}

我在 MapContainer 中添加了该组件，如下所示：

<MapContainer
            center={[51.509865, -0.118092]}
            zoom={10}
            minZoom={2}
            maxBounds={maxBounds}
            maxBoundsViscosity={1.0}
            doubleClickZoom={false}
            style={{
                height: '100vh',
                width: '100vw'
            }}
        >
            <TileLayer url="https://tile.openstreetmap.org/{z}/{x}/{y}.png" />

            <MapZoom/>

</MapContainer>

如果我向 MapZoom 添加样式：绝对位置，zIndex 999，则该组件将显示在地图上，但主要问题是如果我单击我的组件，地图也会处理此单击。 这会产生一些这样的问题： 当我使用滑块时，地图读取单击并以错误的方式设置圆圈。

我

ve tried to stop click propagation, so map wouldn

无法处理该点击，我也使用了react-leaflet-custom-control，效果很好，但我无法将我的组件放在中心:(所以我想找到一个解决方案，而不是一个拼凑。

Answer 1

对我来说，为了避免这种情况，我为按钮设置了一个特定的属性。因此，如果是您创建了 IconButton 组件，只需添加一个如下的 prop：

<IconButton
            aria-label="clear all figures"
            id="btnZoom"
            bgColor="#ffffffe2"
            color="balck"
            onClick={handleButtonClick}
            icon={<FaPlus />}
        />

然后您应该在事件操作中测试此 id 值，例如：

const handleButtonClick = (e) => {
        if(e.target.id === "btnZoom"){
            map.zoomIn()
        }
    }