Javascript 显示物料界面弹出窗口时元素未处理事件

我有一个简单的材质ui

列表

，包含

列表项

元素

我想要一个

Popover

出现在我放置鼠标的

ListItem

旁边。为此，我使用了

mouseEnter

事件。在其处理程序中，我将

Popover

的锚元素设置为鼠标指针当前所在的

ListItem

这对于我悬停在上面的第一个元素很好。但是，由于

Popover

基本上是以“模态”类型的方式运行的，因此当我移动到列表中的另一个

ListItem

时，它的

mouseEnter

事件不会被触发

我已经做了几个小时了，但还是找不到解决的办法

这是一个代码沙盒。尝试将鼠标悬停在一个

列表项上，您将在控制台中看到输出。试着搬到另一个地方，什么也没发生


import React，{useState}来自“React”；
导入“/styles.css”；
从“@material ui/core”导入{List，ListItem，ListItemText，Popover}；
导出默认函数App（）{
常量[PopOveranchoreElement，SetPopOveranchoreElement]=useState（null）；
const handlemouseinter=事件=>{
log（“onmouseinter-”+event.currentTarget.textContent）；
SetPopOverAnchoreElement（event.currentTarget）；
};
常量handleClose=（事件、索引）=>{
SetPopOverAnchoreElement（空）；
};
让isPopoverOpen=布尔值（PopOverAnchoreElement）；
返回(
清单项目1
清单项目2
清单项目3
ListItemInPover
);
}
弹出窗口组件覆盖整个屏幕（
位置：固定；左侧：0；顶部：0；右侧：0；底部：0；z-index:1300
），有效地阻止下部项目的任何鼠标事件

您可以尝试绕过这一点，例如添加
指针事件：none到其覆盖元素将允许光标事件通过它

但是，仅为一个小菜单项使用阻止整个视口的组件对我来说似乎很奇怪，可能是一场艰苦的战斗

同一个库中有一个类似的组件，名为
Popper
，它可能更适合您的需要。在这里，您可以看到我已将您的
popopover
转换为
Popper
，您得到的结果与您期望的结果更接近。（注意，我在代码沙盒中向该元素添加了一些CSS以使其更清晰。）


ListItemInPover


我要注意的是，文档中指出，如果单击这些项目，Popper不会自动关闭，但可以添加

您还可以查看
MenuList
组件，该组件在引擎盖下使用
Popper
，但也为您处理一些状态

import React, { useState } from "react";
import "./styles.css";
import { List, ListItem, ListItemText, Popover } from "@material-ui/core";

export default function App() {
  const [popoverAnchorElement, setPopoverAnchorElement] = useState(null);
  const handleMouseEnter = event => {
    console.log("onMouseEnter - " + event.currentTarget.textContent);
    setPopoverAnchorElement(event.currentTarget);
  };

  const handleClose = (event, index) => {
    setPopoverAnchorElement(null);
  };

  let isPopoverOpen = Boolean(popoverAnchorElement);
  return (
    <div className="App">
      <List style={{ maxWidth: "100px" }}>
        <ListItem button>
          <ListItemText onMouseEnter={handleMouseEnter}>ListItem1</ListItemText>
        </ListItem>
        <ListItem button>
          <ListItemText onMouseEnter={handleMouseEnter}>ListItem2</ListItemText>
        </ListItem>
        <ListItem button>
          <ListItemText onMouseEnter={handleMouseEnter}>ListItem3</ListItemText>
        </ListItem>
      </List>
      <Popover
        open={isPopoverOpen}
        onClose={handleClose}
        anchorEl={popoverAnchorElement}
        anchorOrigin={{
          vertical: "top",
          horizontal: "center"
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "left"
        }}
      >
        <ListItem button>
          <ListItemText>ListItemInPopover</ListItemText>
        </ListItem>
      </Popover>
    </div>
  );
}



  <Popper
    open={isPopoverOpen}
    onClose={handleClose}
    anchorEl={popoverAnchorElement}
    className="popper-item"
  >
    <ListItem button>
      <ListItemText>ListItemInPopover</ListItemText>
    </ListItem>
  </Popper>