Question

   <Popover
       key={element.name}
       className={classes.popover}
       classes={{
         paper: classes.paper
       }}
       open={open}
       anchorEl={this.myRef.current}
       anchorOrigin={{
         vertical: 'bottom',
         horizontal: 'left'
       }}
       transformOrigin={{
         vertical: 'top',
         horizontal: 'left'
       }}
       disableRestoreFocus
       hideBackdrop
    >

我有这种弹出窗口，我想执行onMouseLeave事件，但是不起作用。我该如何解决？发生这种情况是因为我认为该元素中没有另一个html元素，这是它不发出任何动作的原因。也许可以解决这个问题？

这是文档上的链接-https://material-ui.com/utils/popover/

Answer 1

尝试onMouseLeave到PaperProps = {{onmouseLeave：onClose}}

Answer 2

我不太确定要执行的操作，但是Material-UI Popover具有onExit功能，该功能等效于onMouseLeave。

也许你可以做这样的事情，

     <Popover
       key={element.name}
       className={classes.popover}
       classes={{
         paper: classes.paper
       }}
       open={open}
       anchorEl={this.myRef.current}
       anchorOrigin={{
         vertical: 'bottom',
         horizontal: 'left'
       }}
       transformOrigin={{
         vertical: 'top',
         horizontal: 'left'
       }}
       disableRestoreFocus
       hideBackdrop
       onExit={() => {
         PLACE YOUR CODE HERE TO EXECUTE!!!!!
       }}
     >

让我知道是否有帮助。

Answer 3

我遇到了同样的问题，他们的例子没有帮助。

您需要禁用指针事件：

<Popover
    style={{ pointerEvents: 'none'}}
    disableRestoreFocus
    ...
>
...

甚至更好的是，显然使用Popper组件。

使用hiderBackdrop参数（材质ui）为Popover设置onMouseLeave

3 个答案: