问题

I have a bootstrap navbar with 5 NavLinks and a <select> with 2 options for language selection. The NavLinks and <select> collapse into a toggler on smaller screens. When a NavLink is clicked, the toggler collapses again; however, when an <option> is selected, the toggler does not collapse. How can I make the toggler collapse when an <option> is selected?

<Navbar
        bg="dark"
        variant="dark"
        className="fixed-top"
        expand="lg"
        collapseOnSelect
      >
        <Container>
          <Navbar.Brand href="#" className="navbar-left">
            Page Title
          </Navbar.Brand>
          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav" className="nav-collapse">
            <Nav className="mx-auto Nav">
              <Nav.Link href="#">Link One</Nav.Link>
              <Nav.Link href="#">Link Two</Nav.Link>
              <Nav.Link href="#">Link Three</Nav.Link>
            </Nav>

            <Nav>
              <Nav.Link
                href="https://github.com/">
              </Nav.Link>
              <Nav.Link
                href="https://www.linkedin.com">
              </Nav.Link>
            </Nav>
            <div className="language-select">
              <select
                className="custom-select"
                value={props.language}
                onChange={(e) => props.handleSetLanguage(e.target.value)}
              >
                <option value="English">English</option>
                <option value="Español">Español</option>
              </select>
            </div>
          </Navbar.Collapse>
        </Container>
      </Navbar>

<Navbar
bg="dark"
variant="dark"
className="fixed-top"
expand="lg"
collapseOnSelect
>
<Container>
<Navbar.Brand href="#" className="navbar-left">
Page Title
</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav" className="nav-collapse">
<Nav className="mx-auto Nav">
<Nav.Link href="#">Link One</Nav.Link>
<Nav.Link href="#">Link Two</Nav.Link>
<Nav.Link href="#">Link Three</Nav.Link>
</Nav>
<Nav>
<Nav.Link
href="https://github.com/">
</Nav.Link>
<Nav.Link
href="https://www.linkedin.com">
</Nav.Link>
</Nav>
<div className="language-select">
<select
className="custom-select"
value={props.language}
onChange={(e) => props.handleSetLanguage(e.target.value)}
>
<option value="English">English</option>
<option value="Español">Español</option>
</select>
</div>
</Navbar.Collapse>
</Container>
</Navbar>

答案1

得分: 0

You can create a useState hook and add expanded={expanded} into your <Navbar> properties to collapse it manually.
Don't forget to call setExpanded(false) every time you want it to collapse.

function App(props) {
  const [expanded, setExpanded] = useState(false);

  return (
    <Navbar
      bg="dark"
      variant="dark"
      className="fixed-top"
      expanded={expanded}
      expand="lg"
      collapseOnSelect
    >
      <Container>
        <Navbar.Brand href="#" className="navbar-left">
          Page Title
        </Navbar.Brand>
        <Navbar.Toggle
          aria-controls="responsive-navbar-nav"
          onClick={() => setExpanded(!expanded)}
        />
        <Navbar.Collapse id="responsive-navbar-nav" className="nav-collapse">
          <Nav className="mx-auto Nav">
            <Nav.Link onClick={() => setExpanded(false)} href="#">
              Link One
            </Nav.Link>
            <Nav.Link onClick={() => setExpanded(false)} href="#">
              Link Two
            </Nav.Link>
            <Nav.Link onClick={() => setExpanded(false)} href="#">
              Link Three
            </Nav.Link>
          </Nav>

          <Nav>
            <Nav.Link href="https://github.com/"></Nav.Link>
            <Nav.Link href="https://www.linkedin.com"></Nav.Link>
          </Nav>
          <div className="language-select">
            <select
              className="custom-select"
              value={props.language}
              onChange={(e) => {
                props.handleSetLanguage(e.target.value);
                setExpanded(false);
              }}
            >
              <option value="English">English</option>
              <option value="Español">Español</option>
            </select>
          </div>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

function App(props) {
const [expanded, setExpanded] = useState(false);
return (
<Navbar
bg="dark"
variant="dark"
className="fixed-top"
expanded={expanded}
expand="lg"
collapseOnSelect
>
<Container>
<Navbar.Brand href="#" className="navbar-left">
Page Title
</Navbar.Brand>
<Navbar.Toggle
aria-controls="responsive-navbar-nav"
onClick={() => setExpanded(!expanded)}
/>
<Navbar.Collapse id="responsive-navbar-nav" className="nav-collapse">
<Nav className="mx-auto Nav">
<Nav.Link onClick={() => setExpanded(false)} href="#">
Link One
</Nav.Link>
<Nav.Link onClick={() => setExpanded(false)} href="#">
Link Two
</Nav.Link>
<Nav.Link onClick={() => setExpanded(false)} href="#">
Link Three
</Nav.Link>
</Nav>
<Nav>
<Nav.Link href="https://github.com/"></Nav.Link>
<Nav.Link href="https://www.linkedin.com"></Nav.Link>
</Nav>
<div className="language-select">
<select
className="custom-select"
value={props.language}
onChange={(e) => {
props.handleSetLanguage(e.target.value);
setExpanded(false);
}}
>
<option value="English">English</option>
<option value="Español">Español</option>
</select>
</div>
</Navbar.Collapse>
</Container>
</Navbar>
);
}