Reactjs 反应/材质UI滑块/叶片停止事件传播

我正在尝试使用react创建带有材质ui滑块的传单贴图控件。由于某种原因，当我拖动滑块时，它也会拖动贴图。当我尝试禁用控件上的单击/鼠标移动传播时，我无法再滑动滑块

import*as React from“React”；
从“react dom”导入react dom；
从“传单”中输入L；
从“@material ui/core”导入{Slider}”；
函数useMap（）：[React.reObject，L.Map | null]{
const mapRef=React.useRef（null）；
const[map，setMap]=React.useState（null）；
React.useffect（（）=>{
如果（！map&&mapRef.current）{
const newMap=新的L.Map（mapRef.current{
中心：[38.810820900566156，-95.54946899414064]，
缩放：5
});
L.tileLayer（“https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png”）.addTo(
新地图
);
setMap（newMap）；
}
}，[地图]；
返回[mapRef，map]；
}
小部件的功能(
映射：L.映射|空，
组件：React.ReactElement | null
) {
const containerRef=React.useRef（document.createElement（“div”））；
React.useffect（（）=>{
如果（地图）{
常数控制=L.Control.extend({
onAdd（）{
//L.domeEvent.disableClickPropagation（containerRef.current）；
//L.DomEvent.on（containerRef.current，“mousemove”，（事件）=>{
//event.stopPropagation（）；
// });
返回containerRef.current；
}
});
const control=新控件({
位置：“左上”
});
map.addControl（control）；
return（）=>{
地图移除控制（控制）；
};
}
}，[地图]；
React.useffect（（）=>{
if（组件）{
const container=containerRef.current；
render（组件、容器）；
}
}，[组成部分]；
React.useffect（（）=>{
const container=containerRef.current；
return（）=>{
ReactDOM.unmountComponentAtNode（容器）；
};
}，[containerRef]）；
}
函数useSliderWidget（映射：L.map | null）{
const widget=React.usemo(
() => (
滑块：
),
[]
);
使用小部件（地图、小部件）；
}
导出常量应用程序：React.FC=（）=>{
const[mapRef，map]=useMap（）；
使用SliderWidget（地图）；
返回(
);
};

您可以在移动时添加，或者将鼠标放在滑块上

映射。拖动。禁用（）

和以后的

映射。拖动。启用（）

找到解决方案了吗？我遇到了同样的问题。。。我不知道该怎么办。

import * as React from "react";
import ReactDOM from "react-dom";
import L from "leaflet";
import { Slider } from "@material-ui/core";

function useMap(): [React.RefObject<HTMLDivElement>, L.Map | null] {
  const mapRef = React.useRef<HTMLDivElement>(null);

  const [map, setMap] = React.useState<L.Map>(null);

  React.useEffect(() => {
    if (!map && mapRef.current) {
      const newMap = new L.Map(mapRef.current, {
        center: [38.810820900566156, -95.54946899414064],
        zoom: 5
      });
      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(
        newMap
      );
      setMap(newMap);
    }
  }, [map]);

  return [mapRef, map];
}

function useLeafletWidget(
  map: L.Map | null,
  component: React.ReactElement | null
) {
  const containerRef = React.useRef(document.createElement("div"));
  React.useEffect(() => {
    if (map) {
      const Control = L.Control.extend({
        onAdd() {
          // L.DomEvent.disableClickPropagation(containerRef.current);

          // L.DomEvent.on(containerRef.current, "mousemove", (event) => {
          //   event.stopPropagation();
          // });
          return containerRef.current;
        }
      });
      const control = new Control({
        position: "topleft"
      });
      map.addControl(control);
      return () => {
        map.removeControl(control);
      };
    }
  }, [map]);

  React.useEffect(() => {
    if (component) {
      const container = containerRef.current;
      ReactDOM.render(component, container);
    }
  }, [component]);

  React.useEffect(() => {
    const container = containerRef.current;
    return () => {
      ReactDOM.unmountComponentAtNode(container);
    };
  }, [containerRef]);
}

function useSliderWidget(map: L.Map | null) {
  const widget = React.useMemo(
    () => (
      <div style={{ backgroundColor: "white", padding: 10, width: 150 }}>
        Slider: <Slider />
      </div>
    ),
    []
  );

  useLeafletWidget(map, widget);
}

export const App: React.FC = () => {
  const [mapRef, map] = useMap();

  useSliderWidget(map);

  return (
    <>
      <link
        rel="stylesheet"
        href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
        integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
        crossOrigin=""
      />
      <div ref={mapRef} style={{ flexGrow: 1 }}></div>
    </>
  );
};