React中为navbar绑定的addEventListener长时间失效如何解决？

• 原生DOM选择器绑定失效：如果使用document.querySelector之类的原生方法获取导航按钮绑定事件，React每次重渲染会重建部分DOM节点，初始绑定的是首次渲染的旧节点，重渲染后新节点没有绑定事件，自然无响应。
• 事件监听未添加清理函数：useEffect如果没有返回清理函数，每次组件重渲染都会重复绑定新的事件，多次触发会导致状态混乱，出现交互短暂生效后失效的情况。
• 状态更新逻辑冲突：如果用原生JS直接修改DOM类名实现展开收起，没有和React的内部状态同步，React重渲染时会覆盖你手动修改的DOM属性，导致样式瞬间恢复成初始状态。

方案1：使用React合成事件（最推荐） #

完全遵循React的设计逻辑，不用手动绑定原生事件，直接用内置的onClick事件和组件状态联动：

import { useState } from 'react'

function Navbar() {
  // 用state统一控制导航栏展开状态
  const [isMenuOpen, setIsMenuOpen] = useState(false)

  return (
    <nav>
      {/* 直接给导航按钮绑定onClick事件 */}
      <button onClick={() => setIsMenuOpen(!isMenuOpen)} className="hamburger">
        菜单按钮
      </button>
      {/* 通过state动态控制菜单的展示类名 */}
      <div className={`nav-links ${isMenuOpen ? 'active' : ''}`}>
        导航链接列表
      </div>
    </nav>
  )
}

方案2：修复原生事件绑定写法 #

如果必须使用原生addEventListener实现，需要配合useRef获取元素引用，同时添加事件清理逻辑：

import { useState, useRef, useEffect } from 'react'

function Navbar() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  // 用useRef保存按钮的持久引用，不会随重渲染丢失
  const menuBtnRef = useRef(null)

  useEffect(() => {
    const toggleMenu = () => setIsMenuOpen(prevState => !prevState)
    const currentBtn = menuBtnRef.current
    if (currentBtn) {
      currentBtn.addEventListener('click', toggleMenu)
    }
    // 返回清理函数，组件卸载/依赖更新时移除旧的事件绑定，避免重复绑定
    return () => {
      if (currentBtn) {
        currentBtn.removeEventListener('click', toggleMenu)
      }
    }
  }, [])

  return (
    <nav>
      <button ref={menuBtnRef} className="hamburger">
        菜单按钮
      </button>
      <div className={`nav-links ${isMenuOpen ? 'active' : ''}`}>
        导航链接列表
      </div>
    </nav>
  )
}

关键注意事项 #

• 不要直接用原生方法修改DOM属性：所有导航栏的交互状态都要通过React的state驱动，手动修改的DOM类名、样式等属性会在React重渲染时被自动覆盖，这是你看到交互效果短暂生效后消失的核心原因。

内容的提问来源于stack exchange，提问作者Suyash