reactstrap 导航栏在单击时没有显示或折叠

Posted 2023-03-23

【中文标题】reactstrap 导航栏在单击时没有显示或折叠

【英文标题】：reactstrap Navbar not opining or collapsing when clicked

【发布时间】：2021-12-27 11:37:39

【问题描述】：

我已经在 react 中实现了 reactstrap 导航栏，它正在工作，但折叠按钮没有打开/关闭

这是我的代码：

<Navbar color="light" expand="md" light>
    <NavbarBrand href="/">QIFF DASHBOARD</NavbarBrand>
    <NavbarToggler onClick=function noRefCheck()  />
    <Collapse navbar>
      <Nav navbar>createLinks(routes)</Nav>
    </Collapse>
    <NavbarText onClick=handleLogout>Logout</NavbarText>
</Navbar>

【参考方案1】：

试试这个

class App extends Component 
  constructor(props) 
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = 
      isOpen: false
    ;
  
  toggle() 
    this.setState(
      isOpen: !this.state.isOpen
    );

render() 
return (
<Navbar color="inverse" inverse toggleable>
          <NavbarToggler right onClick=this.toggle />
          <NavbarBrand href="/">reactstrap</NavbarBrand>
          <Collapse isOpen=this.state.isOpen navbar>
            <Nav className="ml-auto" navbar>
              <NavItem>
                <NavLink href="/components/">Components</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
              </NavItem>
            </Nav>
          </Collapse>
        </Navbar>
)

`