反应导航栏将其更改为 onmouseover 而不是点击

Question

我想在鼠标悬停时加载 React 导航栏子菜单，而不是单击。 https://react-bootstrap.github.io/components/navbar/

import { Nav,NavDropdown,Navbar } from "react-bootstrap";

<Navbar bg="light" expand="lg">
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav>
                        <NavDropdown title="Beneficiary" id="basic-nav-dropdown" className="Dropdown">
                            <NavDropdown.Item  onClick={() => this.recordList('Approved List',this.state.approvedRecords)}>Approved</NavDropdown.Item>
                            <NavDropdown.Divider />
                            <NavDropdown.Item onClick={() => this.recordList('Rejected List',this.state.rejectedRecords)}>Rejected</NavDropdown.Item>
                            <NavDropdown.Divider />
                            <NavDropdown.Item onClick={() => this.recordList('Referred Back List',this.state.refBackRecords)}>Referback</NavDropdown.Item>
                        </NavDropdown>
</Nav>
                    </Navbar.Collapse>
                    </Navbar>

如有任何帮助，我们将不胜感激。

Answer 1

好吧，根据他们的文档，这不能开箱即用.. 您可以将自己的功能添加到 Mouseenter 上的 NavDropdown 中。如果您使用的是 React Hooks，它将类似于

const [isDropdownVisible, setDropdownVisible] = useState(false);

const handleHover = () => {
  setDropdownVisible(true)
}

当然，您必须将子菜单设置为 visible={isDropdownVisible} 然后在 parent 你可以说 onmouseenter={handleHover} 您可能还必须处理 onmouseleave，我不确定。希望这将是一个有价值的指南:) 祝你好运

Answer 2

在这里，我玩了一分钟

因此，正如我最初建议的那样，我们将添加一个本地常量和一个用于处理下拉列表可见性的函数

 const [visible, setVisible] = useState(false);

  const handleHover = () => {
    setVisible((prevVisible) => (prevVisible = !prevVisible));
  };

然后就

    <Navbar.Collapse id="basic-navbar-nav" onMouseEnter={handleHover}>
            <Nav>
              <NavDropdown
                title="Beneficiary"
                id="basic-nav-dropdown"
                className="Dropdown"
                show={visible}
              >
...

正如我所怀疑的那样，到目前为止，在我的函数中您还必须处理 mouseleave 事件

setVisible((prevVisible) => (prevVisible = !prevVisible));

我们正在切换 mouseenter 的可见性，但您明白了要点 :) LMK 如果我能提供更多帮助，或者如果您遇到更好的解决方案

反应导航栏将其更改为 onmouseover 而不是点击

react navbar change it to onmouseover instead of click

navbar

reactjs

react-bootstrap