响应式导航不起作用(反应)

Question

我正在使用SCSS创建一个React Responsive Navigation，但有些原因。每当我单击汉堡按钮时，没有任何反应，菜单不会在移动视图上向下滑动。我尝试在浏览器中检查以查看是否是 SCSS，但添加了类is-expanded.

isexpanded是CSS类，每当单击汉堡包时都会调用该类，但无法添加到类中以打开菜单。

反应代码：

import React from 'react';
import { BrowserRouter as Router, Link } from 'react-router-dom';
import Dropdown from "../components/pages/dropdowns/dropdown.js";
import hamburger from "../components/images/menu.svg";
class Navigation extends React.Component {
constructor(props) {
super(props);
this.state = {
isExpanded: false
};
}
handleToggle(e) {
e.preventDefault();
this.setState({
isExpanded: this.state.isExpanded
});
}
render() {
const { isExpanded } = this.state;
return (
<Router>
<div className="FlexContainer NavbarContainer">
<div className="mobilecontainer LeftNav">
<h2 className="BrandName LeftNav mobileboxmenu inline FarRight">Kommonplaces</h2>
<div className="hamburger inlinev" >
<img 
onClick={e => this.handleToggle(e)}
alt="menubtn" 
src={hamburger}
/>
</div>
</div>

<ul className={`collapsed ${isExpanded ? "is-expanded" : "NavBar"}`}>
<Dropdown/>    
<li className="RightNav"><Link to="/">Host Your Space</Link></li>
<li className="RightNav"><Link to="/">About Us</Link></li>
<li className="RightNav"><Link to="/">Contact Us</Link></li>
<li className="RightNav"><Link to="/">Sign Up</Link></li>
<li className="RightNav"><Link to="/">Login</Link></li>
</ul>
</div>
</Router>
);
}
}
export default Navigation;

SCSS 代码：

.NavbarContainer {
border-bottom: 1px #E7E7E7 solid;
.collapsed {
overflow: hidden;
max-height: 0;
-moz-transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;
-moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.is-expanded {
overflow: hidden;
max-height: 100vh;
-moz-transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;
-moz-transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
.mobilecontainer {
margin: 2.1em;
.hamburger {
display: inline;
img {
width: 35px;
cursor: pointer;
float: right;
}
}
}
.NavBar {
.RightNav {
text-align: center;
padding: 27px 0;
border-right: none;
border-left: none;
border-bottom: 1px #E7E7E7 solid;
font-size: large;
a {
color: #0E0E0E;
}
}
}

.Dropdown {
float: none;
overflow: hidden;
.Dropdown-Content {
position: relative;
background-color: white;
z-index: 2;
min-width: 217px;       
a {
float: none;
display: block;
text-align: center;
border: 1px #E7E7E7 solid;
padding: 15px 22px;
}
}
}
.dropdown-content {
a {
&:hover {
background-color:  #ddd
}
}
}
.dropdown {
&:hover {
.dropdown-content {
display: block;
}
}
}
.LeftNav {
flex-grow: 8.2;
font-weight: bold;
font-size: large;
display: flex;
align-items: center;
}
@media (min-width: 55em) {
.collapsed {
max-height: 100px;
}
display: flex;
flex-direction: row;
align-items: center;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 60px;
background-color: #ffffff;
padding: 3em;
.LeftNav {
flex-grow: 0.2;
font-weight: bold;
font-size: large;
}
.mobilecontainer {
margin: 0;
.hamburger {
img {
display: none
}
}
}
.NavBar {
display: flex;
.RightNav {
padding-left: 15px;
padding-right: 15px;
text-align: initial;
border-bottom: none;
font-size: large;
}
.FarRight {
flex-grow: 1;
}
}
.Dropdown {
float: left;
overflow: hidden;
.Dropdown-Content {
position: absolute;
top: 96px;
background-color: white;
z-index: 2;
min-width: 217px;       
a {
text-align: left;
padding: 15px 22px;
}
}
}
}
}

Answer 1

看起来您没有切换展开状态。试试这个。

handleToggle(e) {
e.preventDefault();
this.setState(prevState => ({
isExpanded: !prevState.isExpanded, // negate the previous expanded state
}));
}