悬停时显示子菜单的问题

Question

我正在使用 reactstrap 制作一个 reactjs 应用程序，我在其中制作了一个下拉菜单，其中包含其中的子菜单。

我正在尝试实现在悬停在下拉菜单上时显示子菜单的结果，如果有 n 个下拉菜单，则需要显示与悬停项目相关的子菜单。

尝试过的代码：

<Dropdown
  className="d-inline-block"
  onMouseOver={this.onMouseEnter}
  onMouseLeave={this.onMouseLeave}
  isOpen={this.state.dropdownOpen}
  toggle={this.toggle}
>
  <DropdownToggle caret>Dropdown1</DropdownToggle>
  <DropdownMenu>
    <DropdownItem header>Submenu 1</DropdownItem>
    <DropdownItem>Submenu 1.1</DropdownItem>
  </DropdownMenu>
  &nbsp;&nbsp;&nbsp;
  <DropdownToggle caret>Dropdown2</DropdownToggle>
  <DropdownMenu>
    <DropdownItem header>Submenu 2</DropdownItem>
    <DropdownItem>Submenu 2.1</DropdownItem>
    <DropdownItem>Submenu 2.2</DropdownItem>
  </DropdownMenu>
  &nbsp;&nbsp;&nbsp;
  <br />
  <br />
  <DropdownToggle caret>Dropdown3</DropdownToggle>
  <DropdownMenu>
    <DropdownItem header>Submenu 3</DropdownItem>
    <DropdownItem>Submenu 3.1</DropdownItem>
    <DropdownItem>Submenu 3.2</DropdownItem>
    <DropdownItem>Submenu 3.3</DropdownItem>
  </DropdownMenu>
</Dropdown>

Click here for working demo

预期结果：http://supply.com/

在上面给出的 link 中，您可以看到悬停时会显示其各自子菜单的水平菜单，我需要实现相同的行为。

Answer 1

您需要将这些菜单分开并放入一个 <Dropdown> 组件中。
并且您需要为它们中的每一个设置一个事件处理程序。
您可以使用 Array.prototype.map 来简化设置处理程序。

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>
    );
  }
}

堆栈闪电战：https://stackblitz.com/edit/reactstrap-v6-qsffjj

悬停时显示子菜单的问题

Issue in displaying submenu on hover

css

megamenu

twitter-bootstrap

reactjs

reactstrap