我的问题是,当屏幕宽度低于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"
}
}