Making a React Bootstrap NavDropdown dropdown when hovered over

问题

I'm trying to have a dropdown menu bar in React Bootstrap show the options when you hover over it. I've looked everywhere and all the solutions seem out of date and not to work, please let me know if you are able to solve this problem.

Here is the dropdown menu I am trying to apply the change to:

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

and here is a sandbox of the above code.

回答1:

You can use show prop

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

check here codeSandBox

来源：https://stackoverflow.com/questions/61007483/making-a-react-bootstrap-navdropdown-dropdown-when-hovered-over