当前位置: 代码迷 >> JavaScript >> 弹出组件 - onExited回调不起作用,材料ui
  详细解决方案

弹出组件 - onExited回调不起作用,材料ui

热度:80   发布时间:2023-06-07 16:29:02.0
        <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样式

onExited当酥料饼已成功关闭事件。 为此,您需要先调用一个关闭Popover的函数。

<Popover
  key={element.name}
  open={open}
  anchorEl={this.myRef.current}
  onClose={this.handlePopoverClose}
  onExited={() => console.log("The Popup closed")}
>
  ...
</Popover>
  相关解决方案