本文旨在帮助开发者解决在使用 React 添加事件监听器时遇到的组件消失问题。通过分析错误代码，我们将深入探讨 React 的状态管理机制，并提供使用 `useState` Hook 和 `onClick` 事件处理程序的正确方法，以实现组件的动态显示和隐藏。避免直接操作 DOM，采用 React 的声明式编程思想，构建更健壮和可维护的应用程序。
在 React 开发中，直接操作 DOM 是一种不推荐的做法。 当你尝试使用 document.querySelector 和 addEventListener 在 React 组件中添加事件监听器时，可能会遇到组件消失的问题。 这通常是因为你没有遵循 React 的数据流和组件更新机制。 以下将详细讲解如何正确地在 React 中处理事件，避免此类问题。
理解 React 的状态管理
React 依赖于状态（state）来驱动 UI 的更新。 当状态发生变化时，React 会重新渲染组件，从而更新视图。因此，正确地管理状态是 React 开发的关键。
错误示例分析
以下代码展示了使用 document.querySelector 和 addEventListener 的错误方式：
import React from "react";
import {Bars3Icon} from '@heroicons/react/24/solid'
const Navbar = () => {
let btn = document.querySelector('icon');
let menu = document.querySelector('menu1');
btn.addEventListener('click' , () => {
menu.classList.toggle('hidden');
})
return (
<div className="bg-[#1f1e20]">
<div>
<button id="icon"><Bars3Icon className="text-white w-8 h-8 relative left-[320px] top-2" /></button>
<ul id="menu1" className="grid text-white text-center gap-4 p-4 ">
<a href=""><il>
Home
</il></a>
<a href=""><il>
About
</il></a>
<a href=""> <il>
Contact
</il></a>
</ul>
</div>
</div>
)
}
export default Navbar;这段代码的问题在于：
- 直接操作 DOM: document.querySelector 直接操作了 DOM，这绕过了 React 的虚拟 DOM 和更新机制。 React 无法追踪到通过这种方式修改的 DOM 元素，导致组件状态与实际 DOM 状态不一致。
- 组件卸载和重新挂载: 当 React 重新渲染组件时，之前通过 document.querySelector 获取的 DOM 元素可能已经被卸载并重新创建，导致事件监听器失效。
- 在渲染阶段添加事件监听器: 在组件的渲染阶段（即 return 语句中）执行 addEventListener 是不正确的。 组件每次渲染都会尝试添加新的事件监听器，而之前的监听器并没有被移除，这会导致性能问题，并且可能产生意想不到的行为。
正确的实现方式：使用 useState 和 onClick
以下是使用 useState Hook 和 onClick 事件处理程序来正确实现组件动态显示和隐藏的示例：
import React, { useState } from "react";
import { Bars3Icon } from '@heroicons/react/24/solid';
const Navbar = () => {
const [hidden, setHidden] = useState(true); // 初始化为true，默认隐藏
const toggleMenu = () => {
setHidden(!hidden);
};
return (
<div className="bg-[#1f1e20]">
<div>
<button onClick={toggleMenu} >
<Bars3Icon className="text-white w-8 h-8 relative left-[320px] top-2" />
</button>
<ul id="menu1" className={`grid text-white text-center gap-4 p-4 ${hidden ? 'hidden' : ''}`}>
<a href=""><li>Home</li></a>
<a href=""><li>About</li></a>
<a href=""><li>Contact</li></a>
</ul>
</div>
</div>
);
}
export default Navbar;代码解释：
- useState Hook: const [hidden, setHidden] = useState(true); 创建了一个名为 hidden 的状态变量，并将其初始值设置为 true（表示菜单默认隐藏）。 setHidden 函数用于更新 hidden 状态。
- onClick 事件处理程序:
- toggleMenu 函数: const toggleMenu = () => { setHidden(!hidden); }; 这个函数的作用是切换 hidden 状态的值。 当 hidden 为 true 时，将其设置为 false，反之亦然。
- 条件渲染:
总结：
- 使用 useState Hook 管理组件的状态。
- 使用 onClick 事件处理程序来响应用户交互。
- 使用条件渲染根据状态来动态地改变组件的显示和隐藏。
- 避免直接操作 DOM。
进一步优化
- CSS Modules 或 Styled Components: 使用 CSS Modules 或 Styled Components 可以更好地管理组件的样式，避免全局样式冲突。
- 代码可读性: 将代码分割成更小的、可重用的组件，可以提高代码的可读性和可维护性。
- 无障碍性: 确保你的组件具有良好的无障碍性，例如为按钮添加适当的 aria-label 属性。
通过遵循 React 的状态管理机制和组件更新机制，你可以避免组件消失的问题，并构建更健壮和可维护的应用程序。 记住，React 的核心思想是声明式编程，你应该专注于描述你的 UI 应该如何呈现，而不是手动地操作 DOM。
