如何在 React Next.js 中正确管理单选按钮的激活状态

在 Next.js 中应避免直接操作 DOM，推荐使用 useState 管理唯一激活按钮的状态：通过一个数字索引（如 0, 1）标识当前激活项，并在点击时更新该状态，再动态绑定 className 实现视觉反馈。

在 next.js 中应避免直接操作 dom，推荐使用 `usestate` 管理唯一激活按钮的状态：通过一个数字索引（如 `0`, `1`）标识当前激活项，并在点击时更新该状态，再动态绑定 `classname` 实现视觉反馈。

在 React 生态（尤其是 Next.js）中，状态驱动 UI 是核心范式。手动调用 document.querySelectorAll() 移除 class 不仅违背 React 的声明式原则，还可能引发服务端渲染（SSR）不一致、水合错误（hydration mismatch）等严重问题。正确的做法是将“哪个按钮处于激活态”这一事实抽象为组件内部状态。

以下是一个清晰、可扩展、符合最佳实践的实现方案：

✅ 正确做法：用 useState 管理激活索引

import { useState } from 'react';function HebdoSelector() {  const [activeIndex, setActiveIndex] = useState<number | null>(null);  return (    <div className="flex py-24 bg-hebdo w-full">      <div className="flex flex-col gap-5 justify-center items-center w-full">        <h2>HEBDO</h2>        <div className="flex items-center justify-between gap-2 border flex-grow">          <button            className={`py-1.5 px-2 rounded-[3px] text-orange-white-light bg-[#ffffff40] ${activeIndex === 0 ? 'active' : ''}`}            onClick={() => setActiveIndex(0)}            aria-pressed={activeIndex === 0}          >            <DayItem />          </button>          <button            className={`py-1.5 px-2 rounded-[3px] text-orange-white-light bg-[#ffffff40] ${activeIndex === 1 ? 'active' : ''}`}            onClick={() => setActiveIndex(1)}            aria-pressed={activeIndex === 1}          >            <DayItem />          </button>        </div>      </div>    </div>  );}export default HebdoSelector;

? 关键要点说明

• 状态单一可信源：activeIndex 是唯一 truth source，所有按钮的样式都由此派生，无需手动清理其他节点。
• 索引优于布尔值：使用 number | null 类型（而非多个布尔 state）天然支持任意数量按钮，便于后续扩展（例如增加周三、周四按钮）。
• 无障碍增强：添加 aria-pressed 属性，使屏幕阅读器能正确识别按钮的切换状态，提升可访问性。
• 无副作用渲染：完全依赖 React 渲染机制，兼容 SSR/SSG，杜绝 useEffect + querySelector 带来的水合风险。

? 进阶建议（可选）

若按钮数量较多或需动态生成，可进一步封装为数组映射：

const days = ['Mon', 'Tue']; // 或从 props / context 获取return (  <div className="flex items-center justify-between gap-2 border flex-grow">    {days.map((_, idx) => (      <button        key={idx}        className={`py-1.5 px-2 rounded-[3px] text-orange-white-light bg-[#ffffff40] ${activeIndex === idx ? 'active' : ''}`}        onClick={() => setActiveIndex(idx)}        aria-pressed={activeIndex === idx}      >        <DayItem day={idx} />      </button>    ))}  </div>);

⚠️ 注意事项

• 切勿在事件处理器中使用 document.querySelector 或 classList.toggle —— 这会绕过 React 的状态同步，导致 UI 与状态不一致；
• 若初始需默认激活某一项，将 useState 初始化为对应索引（如 useState(0)），但注意 null 更语义化地表达“未选择”；
• 确保 .active CSS 类已正确定义（例如高亮背景色、边框或文字加粗），否则视觉变化不可见。

遵循此模式，你不仅能解决当前问题，更能建立起对 React 状态管理的正确认知，为构建健壮的 Next.js 应用打下坚实基础。