ReactJS中MDBootstrap移动端导航点击后无法折叠问题求助

Hey Andrew, I see the problem with your mobile navbar—when you tap on a navigation link, the menu stays open instead of collapsing like it should. Let's break down why this happens and how to fix it:

What's Causing the Issue? #

Right now, your onClick handler only triggers when you tap the navbar toggler button. When you click a navigation link, there’s no logic to switch the collapse state back to false, so the menu remains expanded even after navigating.

Step-by-Step Fix #

1. Add collapse toggle to all navigation links
   Update every <MDBNavLink> to call your existing onClick method when clicked. This will set the collapse state to false whenever a link is tapped, closing the mobile menu automatically.

2. Fix a typo in the NavbarNav component
   I spotted a small error: <MDBMDBNavbarNav left> has an extra "MDB" prefix—it should be <MDBNavbarNav left>. This typo might cause unexpected rendering issues, so fixing it is important.

Here’s the revised code with these changes applied:

class FixedNavbarExample extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { collapse: false }; 
    this.onClick = this.onClick.bind(this); 
  } 

  onClick() { 
    this.setState({ collapse: !this.state.collapse }); 
  } 

  render() { 
    const bgPink = {backgroundColor: '#e91e63'} 
    const container = {height: 1300} 

    return( 
      <div> 
        <Router> 
          <header> 
            <MDBNavbar style={bgPink} dark expand="md" scrolling fixed="top"> 
              <MDBNavbarBrand href="/"> 
                <strong>Navbar</strong> 
              </MDBNavbarBrand> 
              <MDBNavbarToggler onClick={this.onClick} /> 
              <MDBCollapse isOpen={this.state.collapse} navbar> 
                {/* Fixed typo: MDBMDBNavbarNav → MDBNavbarNav */}
                <MDBNavbarNav left> 
                  <MDBNavItem active> 
                    <MDBNavLink to="#" onClick={this.onClick}>Home</MDBNavLink> 
                  </MDBNavItem> 
                  <MDBNavItem> 
                    <MDBNavLink to="#" onClick={this.onClick}>Features</MDBNavLink> 
                  </MDBNavItem> 
                  <MDBNavItem> 
                    <MDBNavLink to="#" onClick={this.onClick}>Pricing</MDBNavLink> 
                  </MDBNavItem> 
                  <MDBNavItem> 
                    <MDBNavLink to="#" onClick={this.onClick}>Options</MDBNavLink> 
                  </MDBNavItem> 
                </MDBNavbarNav> 
                <MDBNavbarNav right> 
                  <MDBNavItem> 
                    <MDBNavLink to="#" onClick={this.onClick}><MDBIcon fab icon="facebook-f" /></MDBNavLink> 
                  </MDBNavItem> 
                  <MDBNavItem> 
                    <MDBNavLink to="#" onClick={this.onClick}><MDBIcon fab icon="twitter" /></MDBNavLink> 
                  </MDBNavItem> 
                  <MDBNavItem> 
                    <MDBNavLink to="#" onClick={this.onClick}><MDBIcon fab icon="instagram" /></MDBNavLink> 
                  </MDBNavItem> 
                </MDBNavbarNav> 
              </MDBCollapse> 
            </MDBNavbar> 
          </header> 
        </Router> 
        <MDBContainer style={container} className="text-center mt-5 pt-5"> 
          <h2>This Navbar is fixed</h2> 
          <h5>It will always stay visible on the top, even when you scroll down</h5> 
          <br/> 
          <p>Full page intro with background image will be always displayed in full screen mode, regardless of device</p> 
        </MDBContainer> 
      </div> 
    ); 
  } 
} 

export default FixedNavbarExample;

Bonus: Optional Optimization #

If you want to avoid repeating onClick={this.onClick} on every link, you could create a reusable wrapper component for navigation items. But for most use cases, the fix above is simple and effective.

Now when you tap any navigation link on mobile, the menu will collapse automatically before navigating to the target page!

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