Restraps Mouser上的自动下拉菜单

Question

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

 <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来实现此目的？

Answer 1

当然可以使用CSS，但是可以通过使用Synthetic Events在React上使用CSS：

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

onmouseover事件的W3C web示例。