我在我的React项目上使用React-bootstrap包。
我尝试从react-bootsrap官方演示页面上使用带有下拉示例的简单导航栏。
这里是示例。单击“下拉”链接时,下拉菜单会打开,但尝试单击下拉菜单之外的任何位置时,下拉菜单不会关闭。因此,它的行为不像演示中的示例。这可能是什么问题?
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>
答案 0 :(得分:0)
这可能为时已晚,但我遇到了同样的问题。我最终要做的是添加以下内容:
componentDidUpdate() {
document.getElementById("root").click();
}
这会在页面加载后立即强制关闭。将其放入我的主要组件或app.js(如果您愿意的话)中。
HTH