时间戳

首页 > 解决方案 > 为什么我不能在导航栏按钮和关闭按钮之间切换？

reactjs - 为什么我不能在导航栏按钮和关闭按钮之间切换？

问题描述

因此，当我单击导航栏图标时，尽管我将nav-menu保留为-100px并将nav-menu.active保留为0，但我的侧边栏并未显示。我不知道出了什么问题？有人可以帮助我吗？太感谢了！

这是我的 Navbar.js：

import React, { useState } from "react";
import * as FaIcons from "react-icons/fa";
import * as AiIcons from "react-icons/ai";
import { Link } from "react-router-dom";
import { SidebarData } from "./SidebarData";
import "./Navbar.css";

function Navbar() {
  const [sidebar, setSidebar] = useState(false);

  const showSidebar = () => setSidebar(!setSidebar);

  return (
    <div>
      <div className="navbar">
        <Link to="#" className="menu-bars">
          <FaIcons.FaBars onClick={showSidebar} />{" "}
        </Link>{" "}
      </div>{" "}
      <nav className={sidebar ? "nav-menu active" : "nav-menu"}>
        <ul className="nav-menu-items">
          <li className="navbar-toggle">
            <Link to="#" className="menu-bars">
              <AiIcons.AiFillCloseSquare />
            </Link>{" "}
          </li>{" "}
          {SidebarData.map((item, index) => {
            return (
              <li key={index} className={item.cName}>
                <Link to={item.path}>
                  {" "}
                  {item.icon} <span> {item.title} </span>{" "}
                </Link>{" "}
              </li>
            );
          })}{" "}
        </ul>{" "}
      </nav>{" "}
    </div>
  );
}

export default Navbar;

这是我的 Navbar.css：

.navbar {
    background-color: aquamarine;
    height: 80px;
    display: flex;
}

.nav-menu {
    background-color: aquamarine;
    width: 250px;
    height: 100vh;
    display: flex;
    position: fixed;
    top: 0;
    left: -100%;
    transition: 850ms;
}

.nav-menu.active {
    left: 0;
    transition: 350ms;
}

标签： reactjstogglesidebar

解决方案

您正试图否定您的状态更新器功能：

const showSidebar = () => setSidebar(!setSidebar);

您想要切换状态：

const [sidebar, setSidebar] = useState(false);
const showSidebar = () => setSidebar(show => !show);

推荐阅读