问悬停时显示子菜单时出现的问题

EN

import React from "react";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";

export default class Example extends React.Component {
  constructor(props) {
    super(props);

    this.onMouseEnter = this.onMouseEnter.bind(this);
    this.onMouseLeave = this.onMouseLeave.bind(this);
    this.state = {
      dropdownOpen: -1
    };
    this.toggle = this.toggle.bind(this);

    this.menus = [
      {
        title: "Bathroom",
        submenus: [{ title: "Toilets" }, { title: "Toilet seats" }]
      },
      {
        title: "Kitchen",
        submenus: [{ title: "Farmhouse Sinks" }, { title: "Cast Iron Sinks" }]
      }
    ];
  }

  onMouseEnter(current) {
    this.setState({ dropdownOpen: current });
  }

  onMouseLeave() {
    this.setState({ dropdownOpen: -1 });
  }

  toggle() {}

  render() {
    return (
      <div>
        {this.menus.map((menu, i) => (
          <Dropdown
            className="d-inline-block"
            onMouseOver={e => this.onMouseEnter(i)}
            onMouseLeave={this.onMouseLeave}
            isOpen={this.state.dropdownOpen === i}
            toggle={this.toggle}
          >
            <DropdownToggle caret>{menu.title}</DropdownToggle>
            <DropdownMenu>
              {menu.submenus.map((submenu, i) => (
                <DropdownItem header>{submenu.title}</DropdownItem>
              ))}
            </DropdownMenu>
          </Dropdown>
        ))}
      </div>
    );
  }
}