Popover 组件 - onExited 回调不起作用，材质 ui

Posted 2023-02-22

【中文标题】Popover 组件 - onExited 回调不起作用，材质 ui

【英文标题】：Popover component - onExited callback doesn't work , material ui

【发布时间】：2019-07-25 08:21:05

【问题描述】：

        <Popover
              key=element.name
              classes=
                paper: classes.paper
              
              open=open
              anchorEl=this.myRef.current
              anchorOrigin=
                vertical: 'bottom',
                horizontal: 'left'
              
              transformOrigin=
                vertical: 'top',
                horizontal: 'left'
              
              BackdropProps=
                
                  classes:  root: classes.backdrop 
                
              
              onExited=this.handlePopoverClose
            >

onExited 回调不起作用，onClose 运行良好，请帮助我找出为什么会发生这种情况，是在 material ui 上还是在我的代码中出现问题？我也尝试过使用onMouseLeave，它也不起作用

 paper: 
      display: 'grid',
      justifyContent: 'center',
      backgroundColor: palette.common.black,
      flexFlow: 'wrap',
      width: 1128,
      height: 432,
      borderRadius: '0 0 8px 8px',
      padding: '56px 40px 66px 40px',
      overflow: 'hidden',
      gridTemplateColumns: 'auto auto auto auto',
      position: 'absolute',
      zIndex: 20
    ,

 backdrop: 
      background: 'transparent',
      zIndex: 20
    ,

你可以在上面找到我为这个Popover分配的css样式

【问题讨论】：

你的onClose在哪里？

我的意思是，当我尝试使用 onClose insted 的 onExited - 它运行良好，但 onExited 不起作用

我对@9​​87654330@ 没有任何问题。你用的是什么版本？你的open从哪里来？我需要更多上下文来帮助你。

【参考方案1】：

onExited 事件在 Popover 成功关闭时触发。为此，您需要先调用一个关闭 Popover 的函数。

<Popover
  key=element.name
  open=open
  anchorEl=this.myRef.current
  onClose=this.handlePopoverClose
  onExited=() => console.log("The Popup closed")
>
  ...
</Popover>

【讨论】：

这是否意味着我不能在 Popover 组件上使用类似 onMouseLeave 事件的东西？是否不仅可以在 click 上触发动作，还可以在 mouseLeave 动作上触发动作？

Popover 组件没有应用诸如“onMouseLeave”之类的合成事件。不过，您可以将 Popper 中的所有内容包装在应用了这些事件的 div 中。例如<Popper><div onMouseEnter=>...</div></Popper>