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

我正在使用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>

下拉列表1
子菜单1
子菜单1.1
下拉列表2
子菜单2
子菜单2.1
子菜单2.2




下拉列表3
子菜单3
子菜单3.1
子菜单3.2
子菜单3.3

预期结果：

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

您需要将这些菜单分开并放入一个

组件中

您需要为它们中的每一个设置一个事件处理程序

您可以使用

Array.prototype.map

简化设置处理程序

从“React”导入React；
进口{
下拉列表，
下拉开关，
下拉菜单，
下拉项
}从“反应带”；
导出默认类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onMouseEnter=this.onMouseEnter.bind（this）；
this.onMouseLeave=this.onMouseLeave.bind（this）；
此.state={
下拉打开：-1
};
this.toggle=this.toggle.bind（this）；
这是菜单=[
{
标题：“浴室”，
子菜单：[{title:“马桶”}，{title:“马桶座”}]
},
{
标题：“厨房”，
子菜单：[{标题：“农舍水槽”}，{标题：“铸铁水槽”}]
}
];
}
OnMouseCenter（当前）{
this.setState（{dropdownOpen:current}）；
}
请假{
this.setState（{dropdownOpen:-1}）；
}
切换（）{}
render（）{
返回(
{this.menus.map（（menu，i）=>(
这个.onmouseinter（i）}
onMouseLeave={this.onMouseLeave}
isOpen={this.state.dropdownOpen===i}
toggle={this.toggle}
>
{menu.title}
{menu.submenus.map（（子菜单，i）=>(
{子菜单.标题}
))}
))}
);
}
}

---

stackblitz:

您能在stackblitz中创建任何与此相关的示例吗？感谢您的帮助，我如何在我的实际应用程序中实现相同的结果，其中下拉名称将与问题中提供的链接完全相同。。如果你帮我像那样显示菜单和子菜单，我将非常感谢你的帮助，因为我是reactjs新手，我无法理解如何处理它。。我真正的应用程序菜单只会像那个链接一样，我也在尝试实现我编辑过post和stackblitz的..@TestUser。我认为您可以更改

菜单

以获得所需内容。感谢您的帮助，但为什么默认情况下第一个下拉列表是打开的。。应该仅在悬停时打开它。@TestUser

状态的默认值。dropdownOpen

不正确。我已经修好了。

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