Reactstrap NavbarToggler在小型设备上不起作用

时间:2019-07-31 09:14:46

标签: reactjs react-redux reactstrap

我的问题是,当屏幕宽度低于580px且导航栏扩展设置为md时,切换开关会显示出来,但是当我单击它时它什么都不做。它可以在580px以上的屏幕上完美运行。

这是AppNavbar文件(Logout.js只是一个按钮,从逻辑上讲只是注销用户):

import React, { Component } from "react";
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  Container
} from "reactstrap";
import Logout from "../auth/Logout";

class AppNavbar extends Component {
  //You have to bind 'this' for functions IF you don't use arrow function for them
  //this.toggle = this.toggle.bind(this);
  state = {
    isOpen: false
  };

  toggle = () => {
    this.setState({
      isOpen: !this.state.isOpen
    });
  };

  render() {
    return (
      <div>
        <Navbar color="dark" dark expand="md" className="mb-5">
          <Container>
            <NavbarBrand href="/">Control Panel</NavbarBrand>
            <NavbarToggler onClick={this.toggle} />
            <Collapse isOpen={this.state.isOpen} navbar>
              <Nav className="ml-auto" navbar>
                <NavItem>
                  <NavLink href="/dashboard">Home</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink href="/dashboard/product-manager">
                    Manage Products
                  </NavLink>
                </NavItem>
                <NavItem>
                  <Logout />
                </NavItem>
              </Nav>
            </Collapse>
          </Container>
        </Navbar>
      </div>
    );
  }
}

export default AppNavbar;

package.json中的依赖项:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "cloudinary": "^1.14.0",
    "config": "^3.2.2",
    "crypto-js": "^3.1.9-1",
    "history": "^4.9.0",
    "pure-react-carousel": "^1.21.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^7.1.0",
    "react-reveal": "^1.2.2",
    "react-scripts": "3.0.1",
    "react-transition-group": "^4.2.1",
    "reactstrap": "^7.1.0",
    "redux": "^4.0.4",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0"
  }
}

0 个答案:

没有答案