html - 悬停时制作 React Bootstrap NavDropdown 下拉菜单

Question

我正在尝试让 React Bootstrap 中的下拉菜单栏在您悬停时显示选项。我到处都看过，所有解决方案似乎都已过时且无法正常工作，如果您能够解决此问题，请告诉我。

这是我尝试应用更改的下拉菜单:

<Navbar>
  <NavDropdown title="Dropdown Menu">
    <NavDropdown.Item href="#action/3.1">Option 1</NavDropdown.Item>
    <NavDropdown.Item href="#action/3.1">Option 2</NavDropdown.Item>
  </NavDropdown>
</Navbar>

这是一个 sandbox上面的代码。

Answer 1

你可以使用 show 属性

import React, { Component, Fragment, useState } from "react";
import ReactDOM from "react-dom";
import { Navbar, Nav, NavDropdown } from "react-bootstrap";

const Header = props => {
  const [show, setShow] = useState(false);
  return (
    <Navbar>
      <NavDropdown
        title="Dropdown Menu"
        show={show}
        onMouseEnter={() => setShow(true)}
        onMouseLeave={() => setShow(false)}
      >
        <NavDropdown.Item href="#action/3.1">Option 1</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.1">Option 2</NavDropdown.Item>
      </NavDropdown>
    </Navbar>
  );
};

function App() {
  return <Header />;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

在这里查看 codeSandBox