鼠标悬停时如何打开引导程序反应下拉菜单



我在一个团队项目中工作,我们正在使用react bootstrap导航栏。我们希望鼠标悬停时打开下拉菜单。还找不到满意的答案。请帮忙。

import { useState } from "react";
import { Dropdown } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
function App() {
  const [show, setShow] = useState(false);
  return (
    <Dropdown
      onMouseOver={() => setShow(true)}
      onMouseLeave={() => setShow(false)}
    >
      <Dropdown.Toggle className="main-style" id="dropdown-basic">
        Dropdown Button
      </Dropdown.Toggle>
      <Dropdown.Menu show={show}>
        <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
        <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
        <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );
}
export default App;

https://react-bootstrap.netlify.app/components/dropdowns/我发现你可以控制反应引导下拉菜单。菜单显示道具

最新更新