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

Question

我想在鼠标悬停而不是单击时加载react navbar子菜单。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钩子，则类似于

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

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

然后在Nav上您可以说onmouseenter={handleHover}我不确定，您可能还必须处理onmouseleave。希望这将是一个有价值的指南：)祝你好运