javascript - 响应式导航不起作用(React)

Question

我正在使用 SCSS 创建 React 响应式导航，但出于某种原因。每当我单击汉堡包按钮时，没有任何反应，菜单不会在移动 View 上向下滑动。我尝试在浏览器内检查以查看是否是 SCSS，但添加了类 is-expanded。

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

react 代码:

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
  }));
}