使用HiderbackDrop参数(材料UI)进行弹出的OnMouseeLeave

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 to paperprops = {{onmouseleave：onclose}}}

Answer 2

我也有同样的问题，他们的示例无济于事。

您需要禁用指针事件：

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

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

Answer 3

也许这就像我发生的事情一样，让我知道它是否有帮助。

<ButtonColorCircle
      aria-owns={open ? 'color-popover' : undefined}
      aria-haspopup="true"
      onMouseEnter={handleClick}
      // onMouseLeave={handleClose}
     /> 
<Popover
       id="color-popover"
       key={element.name}
       className={classes.popover}
       PaperProps={{onMouseLeave: handleClose}}
       onExit={handleClose}
       classes={{
         paper: classes.paper
       }}
       open={open}
       anchorEl={this.myRef.current}
       anchorOrigin={{
         vertical: 'bottom',
         horizontal: 'left'
       }}
       transformOrigin={{
         vertical: 'top',
         horizontal: 'left'
       }}
       disableRestoreFocus
       hideBackdrop
    >

Answer 4

我不太确定您要执行什么，但材料-UI popover具有与Onmouseleave等效的Onexit功能。

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

     <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!!!!!
       }}
     >