React响应式导航栏点击底部三点按钮无法展开侧边栏问题求助

开发者阿泽

2026-4-23

大家好，我现在碰到一个响应式导航栏的小问题：点击底部导航栏里的三点按钮（MoreHorizOutlinedIcon）时，侧边栏完全没反应。但如果我手动修改open状态的初始值（从true改成false或者反过来），侧边栏能正常显示/隐藏，说明状态切换逻辑是通的，但点击事件的绑定肯定哪里出问题了。

下面是我的组件代码和SCSS样式代码，麻烦帮我排查下问题：

React组件代码

import React, { useState } from 'react'
import './Navbar.scss'

// ICONS
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
import LocalMallOutlinedIcon from '@mui/icons-material/LocalMallOutlined';
import PersonOutlineOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined';
import MenuIcon from '@mui/icons-material/Menu';
import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';
import MoreHorizOutlinedIcon from '@mui/icons-material/MoreHorizOutlined';
import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
import LoginIcon from '@mui/icons-material/Login';
import LogoutIcon from '@mui/icons-material/Logout';
import AssignmentIndIcon from '@mui/icons-material/AssignmentInd';
import Login from '@mui/icons-material/Login';
import Logout from '@mui/icons-material/Logout';
import WhatshotIcon from '@mui/icons-material/Whatshot';
import MailOutlined from '@mui/icons-material/MailOutlined';
import CategoryOutlined from '@mui/icons-material/CategoryOutlined';

const Navbar = () => {
  // NAVBAR TOOGLE MENU
  const[open,setOpen] = useState(true);

  const handleOpen = ()=>{
    console.log("hello")
    setOpen(!open);
  }

  return (
    <div className='navbar'>
      <div className="container">
        <div className="left">
          <h1 className='logo'>urbane</h1>
        </div>
        <div className="center">
          <div className="item">Home</div>
          <div className="item">About</div>
          <div className="item">Hot Offers</div>
          <div className="item">Contact</div>
        </div>
        <div className="right">
          <PersonOutlineOutlinedIcon className='profile'/>
          <div className='fav-Icon'>
            <FavoriteBorderIcon className='fav'/>
            <span>2</span>
          </div>
          <div className='cart-Icon'>
            <LocalMallOutlinedIcon className='cart'/>
            <span>1</span>
          </div>
        </div>
      </div>

      <div className='bottom-menu'>
        <div className='bottom-icon' onClick={handleOpen}>
          <HomeOutlinedIcon fontSize='large'/>
        </div>
        <div className='bottom-icon'>
          <FavoriteBorderIcon fontSize='large'/>
        </div>
        <div className='bottom-icon'>
          <LocalMallOutlinedIcon fontSize='large'/>
        </div>
        <div className='bottom-icon'>
          <MoreHorizOutlinedIcon fontSize='large'/>
        </div>
      </div>

      <div className={open ? `side-menu open-side-menu`:`side-menu`}>
        <div className="side-menu-top">
          <h1 className='logo'>urbane</h1>
          <div className='close' onClick={handleOpen}>
            <CloseOutlinedIcon fontSize='large'/>
          </div>
        </div>
        <div className="side-menu-items">
          <div className="side-menu-item">
            <WhatshotIcon/>
            Hot Offers
          </div>
          <div className="side-menu-item">
            <CategoryOutlined/>
            Products
          </div>
          <div className="side-menu-item">
            <MailOutlined/>
            Contact
          </div>
          <div className='side-menu-item'>
            <LoginIcon/>
            <p>Login</p>
          </div>
          <div className='side-menu-item'>
            <AssignmentIndIcon/>
            <p>Sign Up</p>
          </div>
          <div className='side-menu-item'>
            <LogoutIcon/>
            <p>Logout</p>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Navbar

SCSS样式代码

$spanish-gray: hsl(0, 0%, 60%);
$sonic-silver: hsl(0, 0%, 47%);
$eerie-black: hsl(0, 3%, 7%);
$salmon-pink: hsl(353, 100%, 78%);
$sandy-brown: hsl(29, 90%, 65%);
$bittersweet: hsl(0, 100%, 70%);
$ocean-green: hsl(152, 51%, 52%);
$davys-gray: hsl(0, 0%, 33%);
$cultured: hsl(0, 0%, 93%);
$white: hsl(0, 100%, 100%);
$onyx: hsl(0, 0%, 27%);

@mixin mobile{
  @media screen and (max-width: 480px){
    @content;
  }
}

@mixin tablet{
  @media screen and (max-width: 768px){
    @content;
  }
}

@mixin laptop{
  @media screen and (max-width: 1200px){
    @content;
  }
}

.navbar{
  height: 70px;
  .container{
    display: flex;
    align-items: center;
    justify-content:space-between;
    max-width: 1100px;
    margin:0px auto;
    padding: 12px 20px;
    @include mobile{
      padding: 10px 15px;
    }
    .left{
      h1{
        font-family: 'Righteous', cursive;
      }
      @include tablet{
        width: 100%;
        text-align: center;
      }
    }
    .center{
      display: flex;
      gap: 40px;
      font-weight: bold;
      text-transform: uppercase;
      font-size: 17px;
      color: $davys-gray;
      @include tablet{
        display: none;
      }
      @include mobile{
        display: none;
      }
      .item{
        cursor: pointer;
      }
    }
    .right{
      display: flex;
      gap: 20px;
      .fav,.profile,.cart{
        font-size: 30px;
        cursor: pointer;
      }
      .cart-Icon,.fav-Icon{
        position: relative;
        span{
          font-size: 14px;
          font-weight: bold;
          position: absolute;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          color: white;
          background-color:$salmon-pink;
          display: flex;
          align-items: center;
          justify-content: center;
          top: -7px;
          right: -8px;
        }
      }
      @include tablet{
        display: none;
      }
    }
  }

  .bottom-menu{
    z-index: 1;
    visibility: hidden;
    width: 100%;
    position:fixed;
    padding: 10px;
    right: 0;
    bottom: 0;
    height: 55px;
    width:100%;
    display: flex;
    align-items:center;
    justify-content:center;
    gap: 40px;
    background-color:white;
    @include tablet{
      visibility: visible;
    }
    .bottom-icon{
      cursor: pointer;
    }
  }

  // SIDE MENU
  .side-menu{
    display: none;
    visibility: hidden;
    position:fixed;
    width: 70%;
    padding: 30px 60px;
    z-index: 2;
    top: 0;
    left: -100%;
    height: 100vh;
    background-color:$eerie-black;
    color: white;
    display: flex;
    flex-direction: column;
    align-items:flex-start;
    justify-content: space-around;
    transition:all 1s ease-in-out;
    @include tablet{
      &.open-side-menu{
        visibility: visible;
        display: flex;
        left: 0%;
      }
    }
    .side-menu-top{
      width: 100%;
      display: flex;
      align-items: center;
      gap: 30px;
      justify-content: space-between;
      font-family: 'Righteous', cursive;
      .close{
        cursor: pointer;
      }
    }
    .side-menu-items{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 30px;
      font-size: 20px;
      font-weight: 500;
      .side-menu-item{
        display: flex;
        gap: 10px;
      }
    }
  }
}

问题分析与修复方案

仔细看代码后发现，核心问题很简单：底部导航栏的三点按钮没有绑定点击事件！你给底部的Home图标绑定了handleOpen，但三点图标（MoreHorizOutlinedIcon）所在的bottom-icon完全没加onClick={handleOpen}，所以点击它根本不会触发open状态的切换。

另外还有个小细节：你的初始open状态设为true，但侧边栏默认是隐藏的（left: -100%），逻辑上有点矛盾，建议把初始值改成false，这样默认侧边栏是收起的，点击三点按钮才会展开。

修改后的底部三点按钮代码：

<div className='bottom-icon' onClick={handleOpen}>
  <MoreHorizOutlinedIcon fontSize='large'/>
</div>

修改后的初始状态：

const[open,setOpen] = useState(false);

这样修改后，点击底部的三点按钮就能正常触发侧边栏的展开/收起了。

备注：内容来源于stack exchange，提问作者Nilay Singh

React响应式导航栏点击底部三点按钮无法展开侧边栏问题求助

React组件代码 #

SCSS样式代码 #

问题分析与修复方案 #

React组件代码

SCSS样式代码

问题分析与修复方案