将鼠标悬停在上方时，使React Bootstrap NavDropdown下拉 [英] Making a React Bootstrap NavDropdown dropdown when hovered over

问题描述

我试图在React Bootstrap中有一个下拉菜单栏，当您将鼠标悬停在其上时，将其显示为选项.我到处都看过了，所有解决方案似乎都过时了，无法使用，请告诉我您是否能够解决此问题.

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.

推荐答案

您可以使用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

这篇关于将鼠标悬停在上方时，使React Bootstrap NavDropdown下拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！