React- Bootstrap Свернуть меню Nav не работает

Question

Как и многие другие, наш значок гамбургера React- Bootstrap расширяется очень хорошо, но при выборе одной из ссылок меню навигации остается расширенным. Очевидно, это может иметь какое-то отношение к редактированию React-Router, которое произошло задолго до того, как я начал работать над этим кодом, но ни одно из решений, которые я видел, не работает для этой проблемы.

Я пытался использовать ловушку для отключения обработчиков кликов по ссылкам, но безрезультатно. Кроме того, положить развернутый / свернутый в состояние не получилось (если я не сделал это неправильно). Кто-нибудь знает решение для этого? Спасибо

Это NavBar

class BSNavbar extends React.Component {
  constructor(props) {
    super(props)
    this.state = { supportModal: false, loginModal: false, infoPanel: false }
    this.loginModal = this.loginModal.bind(this)
    this.supportModal = this.supportModal.bind(this)
  }

  loginModal(open = true) {
    this.setState({ loginModal: open })
  }

  supportModal(open = true) {
    this.setState({ supportModal: open })
  }

  infoModal(open = true) {
    this.setState({ infoPanel: open })
  }

  render() {
    return (
      <>
        <Navbar collapseOnSelect>
          <Navbar.Header>
            <Navbar.Brand>
              <WebsiteBrandIcons />
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <NavMenu
              loginModal={this.loginModal}
              supportModal={this.supportModal}
            />
          </Navbar.Collapse>
        </Navbar>
        <NavbarSpacer />
        {this.state.supportModal && (
          <Overlay>
            <ModalContainer>
              <ExitButton
                onClick={() => this.setState({ supportModal: false })}>
                &times;
              </ExitButton>
              <h3>Support</h3>
              <FreshdeskWidget />
            </ModalContainer>
          </Overlay>
        )}
        <LoginModal
          show={this.state.loginModal}
          modalToggle={this.loginModal.bind(this)}
          min={true}
        />
      </>
    )
  }
}

Это компонент NavMenu NavBar (где ссылки)

const FaqLink = ({ faq }) => {
  if (faq && faq.length) {
    return (
      <NavLink className="nav-link" to="/faq">
        <span className="link-name">faq</span>
      </NavLink>
    )
  } else {
    return null
  }
}

const SupportLink = ({ supportModal }) => {
  if (config.support.url) {
    return (
      <li className="link-support">
        <a className="nav-link" onClick={() => supportModal()}>
          <span className="link-name">Support</span>
        </a>
      </li>
    )
  } else {
    return null
  }
}

const NavMenu = ({ supportModal, loginModal }) => {
  return (
    <ul className="nav navbar-nav main-nav">
      <li className="link-dashboard">
        <LoggedIn>
          <NavLink className="nav-link" to="/dashboard/datasets">
            <span className="link-name">My Dashboard</span>
          </NavLink>
        </LoggedIn>
      </li>
      <li className="link-public">
        <NavLink className="nav-link" to="/public/datasets">
          <span className="link-name">Public Dashboard</span>
        </NavLink>
      </li>
      <SupportLink supportModal={supportModal} />
      <li className="link-faq">
        <FaqLink faq={faq} />
      </li>
        <li className="link-dashboard">
          <LoggedIn>
            <UploaderView />
          </LoggedIn>
        </li>
      <li>
        <Navbar.Collapse>
          <Usermenu />
          <LoggedOut>
            <div className="navbar-right sign-in-nav-btn">
              <button className="btn-blue" onClick={() => loginModal()}>
                <span>Sign in</span>
              </button>
            </div>
          </LoggedOut>
        </Navbar.Collapse>
      </li>
    </ul>
  )
}

Answer 1

Хорошо, вот мое решение:

class BSNavbar extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      supportModal: false,
      loginModal: false,
      infoPanel: false,
      navExpanded: false, //new 
    }
    this.loginModal = this.loginModal.bind(this)
    this.supportModal = this.supportModal.bind(this)
//new 
    this.setNavExpanded = this.setNavExpanded.bind(this)
    this.closeNav = this.closeNav.bind(this)
  }

  loginModal(open = true) {
    this.setState({ loginModal: open })
  }

  supportModal(open = true) {
    this.setState({ supportModal: open })
  }

  infoModal(open = true) {
    this.setState({ infoPanel: open })
  }

//new 
  setNavExpanded(expanded = true) {
    this.setState({ navExpanded: expanded })
  }

//new 
  closeNav() {
    this.setState({ navExpanded: false })
  }


  render() {
    return (
      <>
        <Navbar
          onToggle={this.setNavExpanded}
          expanded={this.state.navExpanded}>
          <Navbar.Header>
            <Navbar.Brand>
              <WebsiteBrandIcons />
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <NavMenu
              closeNav={this.closeNav}
              loginModal={this.loginModal}
              supportModal={this.supportModal}
            />
          </Navbar.Collapse>
        </Navbar>
        ...

const NavMenu = ({ supportModal, loginModal, closeNav }) => {
  return (
    <ul className="nav navbar-nav main-nav">
      <li className="link-dashboard">
        <LoggedIn>
          <NavLink
            onClick={closeNav}
            className="nav-link"
            to="/dashboard/datasets">
            <span className="link-name">My Dashboard</span>
          </NavLink>
        </LoggedIn>
      </li>
      <li className="link-public">
        <NavLink onClick={closeNav} className="nav-link" to="/public/datasets">
          <span className="link-name">Public Dashboard</span>
        </NavLink>
      </li>
      <SupportLink closeNav={closeNav} supportModal={supportModal} />
      <li className="link-faq">
        <FaqLink closeNav={closeNav} faq={faq} />
      </li>
      <li className="link-admin">
        <AdminLink closeNav={closeNav} />
      </li>
        <li className="link-dashboard">
          <LoggedIn>
            <UploaderView />
          </LoggedIn>
        </li>
      <li>
        <Navbar.Collapse>
          <Usermenu closeNav={closeNav} />
          <LoggedOut>
            <div className="navbar-right sign-in-nav-btn">
              <button className="btn-blue" onClick={() => loginModal()}>
                <span>Sign in</span>
              </button>
            </div>
          </LoggedOut>
        </Navbar.Collapse>
      </li>
    </ul>
  )
}

Я просто позаботился о том, чтобы реквизит был передан в случае необходимости. Я думаю, что это приличное временное решение, но в конечном итоге хотелось бы полностью перестроить Навбар (в основном, чтобы избавиться от Bootstrap).

Надеюсь, это кому-нибудь поможет ...