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 不起作用
我对@987654330@ 没有任何问题。你用的是什么版本?你的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>
以上是关于Popover 组件 - onExited 回调不起作用,材质 ui的主要内容,如果未能解决你的问题,请参考以下文章
AngularJs的UI组件ui-Bootstrap分享——Tooltip和Popover
无法从 Angularjs 组件访问 Popover 模板上的变量