Reactstrap 鼠标悬停时自动下拉菜单

Posted 2023-03-23

【中文标题】Reactstrap 鼠标悬停时自动下拉菜单

【英文标题】：Reactstrap Auto Dropdown Menu On Mouse Hower

【发布时间】：2020-04-10 23:49:48

【问题描述】：

我正在尝试使用 reactstarap 实现滑动下拉菜单，但找不到任何支持文档或代码。 Bellow 是我的示例菜单，我想要实现的是鼠标悬停动作时的自动滑动下拉菜单。

 <div>
  <Nav navbar>
    <NavItem>
      <Link className="nav-link" to="/">Home</Link>
    </NavItem>

    <ButtonDropdown nav inNavbar isOpen=dropIsOpen onClick=handleDropdown>
      <DropdownToggle nav caret className="nav-link dropdown-toggle">Services</DropdownToggle>
      <DropdownMenu className="dropdown-menu">
        <DropdownItem>
          <Link className="dropdown-item" to="/services/service1">Service1</Link>
        </DropdownItem>
        <DropdownItem>
          <Link className="dropdown-item" to="/services/service2">Service2</Link>
        </DropdownItem>
        <DropdownItem>
          <Link className="dropdown-item" to="/services/service3">Service3</Link>
        </DropdownItem>
        <DropdownItem>
          <Link className="dropdown-item" to="/services/service4">Service4</Link>
        </DropdownItem>
      </DropdownMenu>
    </ButtonDropdown>

    <NavItem>
      <Link className="nav-link" activeClassName="active" to="/our-products">Products</Link>
    </NavItem>

    <NavItem>
      <Link className="nav-link" activeClassName="active" to="/our-clients">Clients</Link>
    </NavItem>

    <NavItem>
      <Link className="nav-link" activeClassName="active" to="/about-us">About Us</Link>
    </NavItem>

    <NavItem>
      <Link className="nav-link" activeClassName="active" to="/contact-us">Contact Us</Link>
    </NavItem>

  </Nav>
</div>

此下拉菜单仅适用于鼠标单击，并且 reactstrap 没有内置方法可以在鼠标悬停时实现它，有没有办法使用纯 CSS 来实现？

【参考方案1】：

当然你可以使用 CSS，但是可以在 React 上使用合成事件来做到这一点：

https://reactjs.org/docs/events.html#mouse-events

您不仅有 onClick 事件，还有以下可用列表：

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp

---

供您使用：

onMouseOver

    <ButtonDropdown nav inNavbar isOpen=dropIsOpen onMouseOver=handleDropdown>

W3C web onmouseover 事件的示例。