Reactjs 在我的React应用程序中，我'；我正在使用material ui中的popover组件。将鼠标悬停在图标上不会打开弹出窗口

我很难弄明白这一点。我已经实现了一个popover组件，当用户将鼠标悬停在“I”图标上时，popover应该打开，当用户将鼠标悬停在远离图标的位置时，它应该关闭popover。我认为正在发生的事情是，当鼠标悬停在图标上时，open和close方法不断被调用，因此它看起来好像从未被打开过

我的组成部分：

export const InfoIconWrapper = styled(InfoIcon)(({ theme }) => ({
  color: fade(theme.palette.black, 0.3),
}));

export const GridWrapper = styled(Grid)(({ theme }) => ({
  pointerEvents: 'none',
  padding: theme.spacing(1),
}));

const DistributionLinePopover = ({ distributionLine }) => {
  const [anchorEl, setAnchorEl] = useState(null);

  const handlePopoverOpen = event => {
    setAnchorEl(event.currentTarget);
  };

  const handlePopoverClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);
  const mouseOverPopover = 'mouse-over-popover';
  return (
    <Fragment>
      <Typography
        aria-owns={open ? mouseOverPopover : undefined}
        aria-haspopup="true"
        onMouseEnter={handlePopoverOpen}
        onMouseOut={handlePopoverClose}
      >
        <InfoIconWrapper fontSize="small" />
      </Typography>
      <Popover
        id={mouseOverPopover}
        open={open}
        anchorEl={anchorEl}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'left',
        }}
        // onMouseOut={handlePopoverClose}
        disableRestoreFocus
      >
        <GridWrapper container>
         ...
        </GridWrapper>
      </Popover>
    </Fragment>
  );
};

export const InfoIconWrapper=styled（InfoIcon）（{theme}）=>({
颜色：淡入淡出（theme.palette.black，0.3），
}));
export const GridWrapper=styled（Grid）（{theme}）=>({
pointerEvents:'无'，
填充：主题。间距（1），
}));
常量DistributionLinePopover=（{distributionLine}）=>{
常量[anchorEl，setAnchorEl]=useState（null）；
const handlePopoverOpen=事件=>{
Setancorel（事件当前目标）；
};
常量handlePopoverClose=（）=>{
setAnchorEl（空）；
};
常量开=布尔值（主播）；
const mouseoverpover='mouse over popover'；
返回(
...
);
};

---

如何修改此代码以使其按预期运行？最初我尝试将HandlePoperClose传递给popover，但这使得只有当您将鼠标悬停在实际的popover上而不是远离“I”图标时，popover才会关闭。

不要将anchorElem存在作为打开的布尔状态值的一部分。事实上，你根本不需要检查主持人。在处理DOM元素引用时，可能存在竞争条件

我会将

setancorel

更改为

setOpen

，并在回车时将

setOpen

更改为

true

。您可能希望像“X”按钮一样，使用onClick事件处理程序将open设置为

false

。我认为，从技术上讲，当一个新元素呈现在您悬停的元素之上时，就会触发底层元素的“鼠标悬停”。见：

---

根据浏览器逻辑，鼠标光标在任何时候都可能只停留在单个元素上–嵌套最多的元素，位于z索引顶部。

确定，最终找到了解决方案

在Popover组件中，将其添加为prop:style={{pointerEvents:'none'} 然后把它拿出来

在InfoIconWrapper组件中，将其添加为一个prop onMouseLeave={handlePopoverClose}

---

工作正常：）

好的，我明白你的意思。不幸的是，这是一项业务需求，需要按照公司的要求进行设计。MaterialUI有一个popover代码段，您可以将其直接放入组件中。它工作得很好，不幸的是，这个团队在react中不允许使用钩子，MaterialUI中的唯一示例是带有钩子的代码片段。应该有一种方法让它表现得像他们的一样（我不得不用一个样式化的组件替换钩子），但我无法理解。