React+Tailwind项目中汉堡菜单类切换toggle功能失效问题求助

兄弟，我帮你捋了下代码，问题主要出在两个地方，先给你拆解清楚：

1. 最直接的错误：按钮的onClick绑定写法不对 #

你现在写的是：

<button class="menu-btn hamburger  absolute top-0 right-0 md:hidden" onClick={showNav()}>

这里的showNav()会在组件一渲染就立即执行，而不是点击按钮时才触发！正确的写法应该去掉括号，把函数本身传给onClick：

<button class="menu-btn hamburger  absolute top-0 right-0 md:hidden" onClick={showNav}>

2. 原生DOM操作的冗余与隐患 #

你在showNav函数里又给按钮加了一次click事件监听，这会导致重复绑定——点击一次按钮可能触发多次toggle，反而让状态混乱。而且在React中直接用document.querySelector和原生事件监听，容易和React的虚拟DOM机制冲突（比如组件重新渲染时元素被销毁重建，监听失效）。

给你两种解决方案： #

方案1：快速修复（保留原生DOM操作）

修改showNav函数，去掉冗余的事件监听，直接在函数里执行类切换：

const showNav = () => {
  const menuBtn = document.querySelector('.menu-btn')
  const navbar = document.querySelector('.menumob')
  const sqr = document.querySelector('.sqr')

  // 直接执行toggle，不需要再绑定点击事件
  menuBtn.classList.toggle('is-active')
  navbar.classList.toggle('is-active')
  sqr.classList.toggle('hidden')
}

同时把按钮的onClick改成onClick={showNav}（去掉括号）。

方案2：React范式写法（推荐）

用React的useState状态来控制类名，完全避免原生DOM操作的坑，逻辑也更清晰：

import { useState } from 'react'

// 假设这是你的组件
const Navbar = () => {
  const [isNavActive, setIsNavActive] = useState(false)

  const toggleNav = () => {
    setIsNavActive(prevState => !prevState)
  }

  return (
    <>
      {/* 汉堡按钮：根据状态动态添加is-active类 */}
      <button 
        className={`menu-btn hamburger absolute top-0 right-0 md:hidden ${isNavActive ? 'is-active' : ''}`}
        onClick={toggleNav}
      >
        <div className="bar"></div>
      </button>

      {/* 移动端菜单 */}
      <div className={`menumob ${isNavActive ? 'is-active' : ''}`}>
        {/* 菜单内容 */}
      </div>

      {/* sqr元素：根据状态添加hidden类 */}
      <div className={`sqr ${isNavActive ? 'hidden' : ''}`}>
        {/* sqr内容 */}
      </div>
    </>
  )
}

另外提一句：React里规范写法是用className代替class，Tailwind也完全兼容，建议统一改成className哦~

备注：内容来源于stack exchange，提问作者Sam Rad