反应-停止下拉菜单关闭

Question

我有一个反应导航，当鼠标进入导航项时会打开一个下拉菜单。问题是，下拉菜单关闭的速度过快，如果我单击下拉菜单中的链接，则下拉菜单将关闭，因为鼠标已离开导航仪。

拥有它的最佳方法是什么，如果我将鼠标悬停在navitem上，但下拉菜单关闭，则关闭下拉菜单？

class Nav extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      showMenu: false,
      selectedMenu: ''
    }

    this.getNavItems = this.getNavItems.bind(this)
    this.getNavMenus = this.getNavMenus.bind(this)
    this.handleHover = this.handleHover.bind(this)
    this.setSelectedMenu = this.setSelectedMenu.bind(this)
    this.handleOnBlur = this.handleOnBlur.bind(this)
  }

  handleOnBlur () {
    this.updateMenuState()
  }

  handleHover (e) {
    this.updateMenuState()
    this.selectedMenu = e.target.getAttribute('data-menu')
    this.setSelectedMenu()
    return null
  }

  updateMenuState () {
    this.setState(prevState => ({
      showMenu: !prevState.showMenu,
    }))
  }

  setSelectedMenu () {
    this.setState({
      selectedMenu: this.selectedMenu
    })
  }

  getNavItems () {
    const activeClass = classNames({
      'nav-tab-active': this.state.showMenu
    })
    return Object.keys(nav).map((navItem, key) => {
      return (
        <a key={key} onBlur={this.handleOnBlur} onMouseEnter={this.handleHover} id={`f__${navItem}`} data-menu={key} className={activeClass} href='#'>
          {nav[navItem].header}
        </a>
      )
    })
  }

  getNavMenus () {
    return Object.keys(nav).map((navItem, key) => {
      const boxes = nav[navItem].boxes
      return (
       <nav key={key} id={`${nav[navItem].className}_nav`} className={`show-${nav[navItem].className}-nav`}>
          <DropDown key={key} linkData={boxes[0]} />
        </nav>
      )
    })
  }

  render () {
    const navItems = this.getNavItems()
    const navMenus = this.getNavMenus()
    const showNav = classNames({
      'show-nav': this.state.showMenu
    })
    return (
      <header className='navigation '>
        <div className={showNav}>
          <div className='navigation__container'>
            {navItems}
          </div>
          { this.state.showMenu && navMenus[this.state.selectedMenu] }
        </div>
      </header>
    )
  }
}

export default Nav