React JS中Toggle Button（汉堡按钮）代码失效求助

在React里直接用原生DOM操作（比如getElementById和addEventListener）会因为组件的渲染机制失效——组件重新渲染时，之前绑定的事件可能丢失，或者DOM元素还没挂载就执行了选择器。正确的做法是用React的状态管理来控制UI变化，完全符合React的数据流逻辑。

以下是修改后的Navbar组件代码：

import React, { useState } from 'react';
import logo from '../images/logo.svg';

const Navbar = () => {
  // 用useState管理菜单展开状态，初始为收起
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <div>
      <nav className='relative container mx-auto p-6'>
        {/* Flex Container */}
        <div className='flex items-center justify-between'>
          {/* Logo */}
          <div className='pt-2'>
            <img src={logo} alt='logo'></img>
          </div>

          {/* 桌面端菜单 */}
          <div className='hidden space-x-6 md:flex'>
            <a href='/' className='hover:text-darkGrayishBlue'>Pricing</a>
            <a href='/' className='hover:text-darkGrayishBlue'>Product</a>
            <a href='/' className='hover:text-darkGrayishBlue'>About Us</a>
            <a href='/' className='hover:text-darkGrayishBlue'>Careers</a>
            <a href='/' className='hover:text-darkGrayishBlue'>Community</a>
          </div>

          {/* 桌面端按钮 */}
          <div>
            <a
              href='/'
              className='hidden p-3 px-6 pt-2 text-white bg-brightRed rounded-full baseline hover:bg-brightRedLight md:block'
            >
              Get Started
            </a>
          </div>

          {/* 汉堡按钮 - 绑定点击事件切换状态 */}
          <button
            onClick={() => setIsMenuOpen(!isMenuOpen)}
            className={`block hamburger md:hidden focus:outline-none ${isMenuOpen ? 'open' : ''}`}
          >
            <span className='hamburger-top'></span>
            <span className='hamburger-middle'></span>
            <span className='hamburger-bottom'></span>
          </button>
        </div>

        {/* 移动端菜单 - 根据状态动态切换类名 */}
        <div className='md:hidden'>
          <div
            className={`absolute flex-col items-center ${isMenuOpen ? 'flex' : 'hidden'} self-end py-8 mt-10 space-y-6 font-bold bg-white sm:w-auto sm:self-center left-6 right-6 drop-shadow-md`}
          >
            <a href='/'>Pricing</a>
            <a href='/'>Product</a>
            <a href='/'>About</a>
            <a href='/'>Careers</a>
            <a href='/'>Community</a>
          </div>
        </div>
      </nav>
    </div>
  );
};

export default Navbar;

关键修改点： #

• 引入useState钩子创建isMenuOpen状态变量，控制菜单的展开/收起
• 给汉堡按钮添加onClick事件，点击时切换isMenuOpen的布尔值
• 用模板字符串动态拼接类名：
  • 汉堡按钮：状态为true时添加open类，对应你原来的按钮样式切换
  • 移动端菜单：状态为true时显示flex，否则保持hidden

这种方式完全避免了直接操作DOM，所有UI变化都由React状态驱动，不会出现事件绑定失效的问题，也更符合React的开发规范。

内容的提问来源于stack exchange，提问作者John Cañero