如何实现选择下拉选项时折叠Bootstrap导航栏切换器？

要实现选择语言选项后折叠导航栏切换器，你需要手动控制导航栏的展开状态，在选择选项时主动关闭折叠菜单。以下是具体步骤和修改后的代码：

步骤说明 #

• 新增状态变量跟踪导航栏的展开/折叠状态
• 将状态绑定到Navbar.Collapse组件，实现手动控制
• 在语言选择的onChange事件中，更新语言的同时将导航栏设置为折叠状态
• 确保导航栏切换按钮仍能正常切换展开/折叠状态

修改后的代码 #

import { useState } from 'react';
import { Navbar, Container, Nav } from 'react-bootstrap';

function CustomNavbar(props) {
  // 跟踪导航栏展开状态的变量
  const [isNavbarExpanded, setIsNavbarExpanded] = useState(false);

  return (
    <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"
          onClick={() => setIsNavbarExpanded(!isNavbarExpanded)}
        />
        {/* 用状态控制折叠菜单的显示 */}
        <Navbar.Collapse
          id="responsive-navbar-nav"
          className="nav-collapse"
          expanded={isNavbarExpanded}
        >
          <Nav className="mx-auto Nav">
            <Nav.Link href="#" onClick={() => setIsNavbarExpanded(false)}>Link One</Nav.Link>
            <Nav.Link href="#" onClick={() => setIsNavbarExpanded(false)}>Link Two</Nav.Link>
            <Nav.Link href="#" onClick={() => setIsNavbarExpanded(false)}>Link Three</Nav.Link>
          </Nav>

          <Nav>
            <Nav.Link href="https://github.com/" onClick={() => setIsNavbarExpanded(false)}>
              GitHub
            </Nav.Link>
            <Nav.Link href="https://www.linkedin.com" onClick={() => setIsNavbarExpanded(false)}>
              LinkedIn
            </Nav.Link>
          </Nav>
          <div className="language-select">
            <select
              className="custom-select"
              value={props.language}
              onChange={(e) => {
                props.handleSetLanguage(e.target.value);
                // 选择语言后主动折叠导航栏
                setIsNavbarExpanded(false);
              }}
            >
              <option value="English">English</option>
              <option value="Español">Español</option>
            </select>
          </div>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

关键点解释 #

1. 状态管理：通过useState创建isNavbarExpanded变量，直接控制导航栏的展开/折叠状态。
2. 切换按钮绑定：给Navbar.Toggle添加点击事件，切换状态值，保证默认切换功能正常。
3. 折叠组件绑定：将Navbar.Collapse的expanded属性与状态变量绑定，让状态直接决定菜单是否显示。
4. 语言选择事件：在下拉选择的回调中，先完成语言更新逻辑，再将状态设为false，手动关闭折叠菜单。
5. NavLink兼容：手动给每个Nav.Link添加点击事件关闭菜单，避免因自定义状态管理导致原有collapseOnSelect属性失效。

内容的提问来源于stack exchange，提问作者Rachel