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

Posted

技术标签:

【中文标题】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 中。例如&lt;Popper&gt;&lt;div onMouseEnter=&gt;...&lt;/div&gt;&lt;/Popper&gt;

以上是关于Popover 组件 - onExited 回调不起作用,材质 ui的主要内容,如果未能解决你的问题,请参考以下文章

vue实现一个简易Popover组件

AngularJs的UI组件ui-Bootstrap分享——Tooltip和Popover

Ionic 从另一个组件打开 Popover

无法从 Angularjs 组件访问 Popover 模板上的变量

element-ui解决el-popover的边界重新计算元素位置的问题

调用 popover 并将变量发送回之前的 uiview