反应悬停菜单关闭

Question

我正尝试在react：https://codepen.io/redfrost/pen/CvFpD

中执行此引导超大型菜单

当我将鼠标悬停在导航<li>上时，子导航也会在<li>内部渲染。当我尝试将鼠标悬停在它上时，它将关闭我的孩子的导航。

当我仍在<li>内时为什么会发生这种情况？ …………………………………………

import React from "react";
import { Link } from "react-router-dom";
import "./Nav.css";

import Logo from "../Logo";

// MockData
var MockData = [
  {
    text: "Donorsøgninge",
    id: "1",
    parentid: "-1"
  },
  {
    id: "2",
    parentid: "1",
    text: "Hot Chocolate"
  },
  {
    id: "3",
    parentid: "1",
    text: "Peppermint Hot Chocolate"
  },
  {
    id: "4",
    parentid: "1",
    text: "Salted Caramel Hot Chocolate"
  },
  {
    id: "5",
    parentid: "1",
    text: "White Hot Chocolate"
  },
  {
    id: "6",
    text: "Donorsæd",
    parentid: "-1"
  },
  {
    id: "7",
    parentid: "6",
    text: "Caffe Americano"
  },
  {
    id: "8",
    text: "Caffe Latte",
    parentid: "6"
  },
  {
    id: "9",
    text: "Caffe Mocha",
    parentid: "6"
  },
  {
    id: "10",
    text: "Cappuccino",
    parentid: "6"
  },
  {
    id: "11",
    text: "Pumpkin Spice Latte",
    parentid: "6"
  },
  {
    id: "12",
    text: "Bliv donor",
    parentid: "-1"
  },
  {
    id: "13",
    text: "Caffe Vanilla Frappuccino",
    parentid: "12"
  },
  {
    id: "15",
    text: "450 calories",
    parentid: "13"
  },
  {
    id: "16",
    text: "16g fat",
    parentid: "13"
  },
  {
    id: "17",
    text: "13g protein",
    parentid: "13"
  },
  {
    id: "14",
    text: "Caffe Vanilla Frappuccino Light",
    parentid: "12"
  },
  {
    id: "18",
    text: "Services",
    parentid: "-1"
  },
  {
    id: "19",
    text: "Om os",
    parentid: "-1"
  },
  {
    id: "20",
    text: "Info",
    parentid: "-1"
  }
];

export default class Nav extends React.Component {
  constructor(props) {
    super(props);
    this.navId = "";

    this.state = {
      showSubMenu: []
    };
  }

  handleHover = (id, event) => {
    this.navId = id;
    const showSubMenu = this.state.showSubMenu;
    showSubMenu[id] = !showSubMenu[id];
    this.setState({ showSubMenu: showSubMenu }, () => {
      //console.log(this.state.showSubMenu);
    });
  };

  render() {
    // Find navigation children
    var children = {};
    for (let obj of MockData) {
      if (!children.hasOwnProperty(obj.parentid)) {
        children[obj.parentid] = [obj.id];
      } else {
        children[obj.parentid].push(obj.id);
      }
    }

    const showNav = (firstLevel, index) => {
      if (children.hasOwnProperty(firstLevel.id)) {
        if (firstLevel.parentid === "-1") {
          return (
            <li
              key={firstLevel.id}
              className="dropdown menu-large"
              onMouseOver={this.handleHover.bind(this, firstLevel.id)}
              onMouseOut={this.handleHover.bind(this, firstLevel.id)}
            >
              <a className="dropdown-toggle">{firstLevel.text}</a>
              {this.state.showSubMenu[firstLevel.id] && (
                <Submenu navId={this.navId} />
              )}
            </li>
          );
        }
      } else {
        if (firstLevel.parentid === "-1") {
          return (
            <li key={firstLevel.id}>
              <a className="button">{firstLevel.text}</a>
            </li>
          );
        }
      }
    };

    return (
      <nav className="navbar navbar-default navbar-static-top">
        <div className="container">
          <div className="navbar-header">
            <button
              type="button"
              className="navbar-toggle"
              data-toggle="collapse"
              data-target=".navbar-collapse"
            >
              <span className="icon-bar" />
              <span className="icon-bar" />
              <span className="icon-bar" />
            </button>
            <Link to="/" className="navbar-brand">
              <Logo />
            </Link>
          </div>
          <div className="navbar-collapse collapse">
            <ul className="nav navbar-nav">{MockData.map(showNav)}</ul>
          </div>
        </div>
      </nav>
    );
  }
}

class Submenu extends React.Component {
  render() {
    let showNavSecondlevel = MockData.filter(secondLevel => {
      return secondLevel.parentid === this.props.navId;
    });

    return (
      <ul className="dropdown-menu megamenu row">
        <li className="col-sm-3">
          <ul>
            {showNavSecondlevel.map(secondLevel => (
              <li key={secondLevel.id}>
                <a>
                  <span>{secondLevel.text}</span>
                </a>
              </li>
            ))}
          </ul>
        </li>
      </ul>
    );
  }
}

CSS

.navbar-default {
    border: none;
}

.navbar-default .container {
    border-bottom: 1px solid #37bef4;
    position: relative;
    background: #ffffff;
}

.navbar-default .container .navbar-header .navbar-brand {
    margin-right: 100px;
    padding: 0;
    height: auto;
}

.navbar-default .container .navbar-nav > li > a {
    height: 65px;
    color: #222;
    padding: 24px 16px 0 16px;
    font-size: 17px;
    color: #222;
    background-color: #ffffff;
    box-sizing: border-box;
    border-bottom: 1px solid #37bef4;
    position: relative;
    z-index: 1001;
    top: 1px;
    cursor: pointer;
}

.navbar-default .container .navbar-nav > li > a:hover {
    border: 1px solid #37bef4;
    border-bottom: 1px solid #ffffff;
    padding: 23px 15px 0 15px;
    background-color: #ffffff;
}

.navbar-default .container .navbar-nav > li > a.button:hover {
    border: 1px solid #37bef4;
}

.navbar-default .container .menu-large {
    position: static !important;
}

.navbar-default .container .megamenu {
    padding: 20px 0px;
    width: 100%;
    display: none;
}

.navbar-default .container .megamenu.dropdown-menu {
    border: none;
    border-top: 1px solid #37bef4;
    border-bottom: 1px solid #37bef4;
    border-radius: 0;
    box-shadow: none;
    display: block;
}

.navbar-default .container .megamenu .divider {
    background: none;
}

.navbar-default .container .megamenu > li > ul {
    padding: 0;
    margin: 0;
}

.navbar-default .container .megamenu > li > ul > li {
    list-style: none;
}

.navbar-default .container .megamenu > li > ul > li.dropdown-header {
    font-size: 17px;
    color: #c3c3c3;
    border-bottom: 1px solid #c3c3c3;
}

.navbar-default .container .megamenu > li > ul > li.dropdown-header:hover {
    color: #c3c3c3;
}

.navbar-default .container .megamenu > li > ul > li.divider {
    background: none;
}

.navbar-default .container .megamenu > li > ul > li > a {
    font-size: 16px;
    display: block;
    padding: 3px 20px;
    clear: both;
    color: #444444;
    white-space: normal;
    text-decoration: none;
}

.navbar-default .container .megamenu > li > ul > li > a:hover,
.navbar-default .container .megamenu > li > ul > li > a:focus {
    text-decoration: none;
    color: #262626;
    background-color: #f5f5f5;
}

.navbar-default .container .megamenu.disabled > a {
    color: #999999;
}

.navbar-default .container .megamenu.disabled > a:hover {
    color: #999999;
    text-decoration: none;
    background-color: transparent;
    background-image: none;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
    cursor: not-allowed;
}

.navbar-default .container .megamenu.disabled > a:focus {
    color: #999999;
    text-decoration: none;
    background-color: transparent;
    background-image: none;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
    cursor: not-allowed;
}

.navbar-default .container .megamenu.dropdown-header {
    color: #428bca;
    font-size: 18px;
}