Popover组件材料ui上的onMouseLeave事件

Question

import React from 'react'
import PropTypes from 'prop-types'
import config from 'react-global-configuration'
import classNames from 'classnames'

import styles from './styles'

import Popover from '@material-ui/core/Popover'
import Typography from '@material-ui/core/Typography'

import HomeIcon from 'icons/Home'
import Circle from 'icons/Circle'

import withStyles from 'hoc/withStyles'

import AnimatedEntrance from 'components/AnimatedEntrance'
import Divider from 'components/Divider'
import ButtonBase from 'components/Button/Base'
import GameBox from 'components/Games/Box'
import Count from 'components/Games/Count'

class NavigationBar extends React.Component {
  myRef = React.createRef()
  name = ''

  state = {
    item: null
  }

  handlePopoverOpen = (event, name) => {
    this.setState({ item: name })
    this.name = name
  }
  handlePopoverClose = () => {
    this.setState({ item: null })
  }

  render () {
    const menu = config.get('navigation.bar')
    const slots = config.get('navigationBar.slots')
    const { classes, location } = this.props
    const { item } = this.state
    const open = Boolean(item)
    return (
      <AnimatedEntrance>
        <div className={classes.container}>
          <div
            ref={this.myRef}
            className={classes.buttons}
            onMouseLeave={(e) => this.handlePopoverOpen(e, this.name)}
          >

            <ButtonBase
              className={location.pathname === '/' ? classes.active : classes.buttonHomeContainer}
              variant='text'
              to='/'

            >
              <HomeIcon />
            </ButtonBase>

            <Divider className={classes.divider} />

            {menu.map((element) => (
              <React.Fragment
                key={element.name}
              >
                <div
                  onMouseEnter={(e) => this.handlePopoverOpen(e, element.name)}
                  onMouseLeave={this.handlePopoverClose}
                >
                  <ButtonBase
                    className={
                      element.url === location.pathname
                        ? classNames(classes.active, classes.buttonHomeContainer)
                        : classes.buttonHomeContainer
                    }
                    value={element.name}
                    variant='text'
                    to={element.url}
                  >
                    <Typography variant={'body2'} className={classes.flex}>
                      {element.name}
                      {element.name === 'Promo Page' ? <Circle /> : null}
                    </Typography>
                  </ButtonBase>
                </div>
                <Divider className={classes.divider}/>
              </React.Fragment>
            ))}
          </div>
          <div>
            {
              menu.map((element) => {
                if (element.name === item) {
                  return (
                    <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={this.handlePopoverClose}
                    >
                      {slots.map((entity, index) => {
                        return (<GameBox
                          element={entity}
                          isDivider={index % 3 === 0 && index !== 0}
                        />)
                      })}
                      <Count
                        count={slots.length}
                        to={'/slots'}
                        sectionName={element.name}
                      />
                    </Popover>
                  )
                }
              })
            }
          </div>
        </div>
      </AnimatedEntrance>
    )
  }
}

NavigationBar.propTypes = {
  classes: PropTypes.object.isRequired,
  location: PropTypes.object.isRequired
}

export default withStyles(styles)(NavigationBar)

此代码段描述了一些菜单。菜单的每个按钮都有onMouseEnter事件，可打开Popover（物料ui组件）。当我 移至此弹出框（1处于非活动状态），我无法单击那里的任何内容，第二个，当我尝试在此onMouseLeave元素上触发Popover时，它也没有给出任何内容反应。为什么会发生？有人知道如何解决吗？我花了2天的时间搜索，但没有找到任何解决这个问题的方法。请在某处存在回应，让我知道。如果我的解释不够清楚，请不要害羞地问我更多信息