javascript - React-MUI 为 ClickAwayListener 添加异常

Question

您好，我是 MUI 新手，我正在尝试在我的项目中使用 ClickAwayListener API，但我无法弄清楚。
正如你可以在codesandbox中看到我的项目: https://codesandbox.io/s/react-leaflet-icon-material-forked-3vnvvd

我试图通过 MUI 中的 Fab 组件定义 5 个按钮，通过 传单 在 map 上向我的 friend 展示。
当您通过将名称传递给 MapInfo 组件来单击他们的名称时，他们的名称将显示在 map 中的卡片上。
这是index.js中的App函数代码:

export default function App() {
  const [show, setShow] = React.useState(false);
  const [name, setName] = React.useState("");

  const friends = [
    {
      name: "john",
      pos: [51.499, -0.091]
    },
    {
      name: "jane",
      pos: [51.508, -0.12]
    },
    {
      name: "jack",
      pos: [51.509, -0.08]
    },
    {
      name: "jill",
      pos: [51.505, -0.091]
    },
    {
      name: "jason",
      pos: [51.517, -0.091]
    },
    {
      name: "justin",
      pos: [51.517, -0.11]
    }
  ];

  //onclick listener

  const IconOnClick = (e, index) => {
    setName(friends[index]["name"]);
    if (!show) {
      setShow((prev) => !prev);
    }
  };

  // defining Icons

  const makeIcon = (data) => {
    return data.map((a) => {
      const Icons = divIcon({
        html: renderToStaticMarkup(
          <Fab size="small" variant="extended">
            {a["name"]}
          </Fab>
        )
      });
      return Icons;
    });
  };

  const myIcons = makeIcon(friends);

  return (
    <div>
      {show && <MapInfo name={name} />}
      <Map center={[51.505, -0.091]} zoom={13}>
        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
        />

        {myIcons.map((a, index) => (
          <Marker
            position={friends[index]["pos"]}
            icon={a}
            key={index}
            onClick={(e) => {
              IconOnClick(e, index);
            }}
          />
        ))}
      </Map>
    </div>
  );
}

现在我希望通过点击(不是在图标上)MapInfo 组件消失，如果我反复单击图标，我想显示它们的名称，因为它现在显示它们而不关闭。

问题是 ClickAwayListener 无法从典型的点击中找出图标上的点击。您对在 clickAwayListener 上设置异常(exception)有什么想法吗？!？

Answer 1

将 stopPropagation 事件添加到 Marker 图标。

const IconOnClick = (e, index) => {
   e.originalEvent.stopPropagation();
   ....
}

演示: