Next.js中实现多按钮单选激活状态的最佳实践咨询

你需要实现单选按钮组：点击某按钮时为它添加active类，同时移除其他按钮的active类，用React的useState确实是更符合React思想的方案——React是状态驱动UI，不需要直接操作DOM元素（比如你之前用的querySelectorAll）。

具体实现思路 #

• 用useState存储当前选中按钮的唯一标识（自定义ID、索引值都可以）
• 给每个按钮绑定点击事件，点击时把当前按钮的标识存入状态
• 渲染按钮时，判断当前按钮标识是否和状态值一致，一致则添加active类

修改后的完整组件代码 #

import { useState } from 'react';
import DayItem from './DayItem'; // 请根据实际路径调整

export default function HebdoComponent() {
  // 初始化选中第一个按钮，也可以设为null表示初始无选中
  const [selectedBtnId, setSelectedBtnId] = useState('btn1');

  // 点击事件处理函数，接收当前按钮的ID
  const handleBtnClick = (btnId) => {
    setSelectedBtnId(btnId);
  };

  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] ${selectedBtnId === 'btn1' ? 'active' : ''}`}
            onClick={() => handleBtnClick('btn1')}
          >
            <DayItem />
          </button>
          <button 
            className={`py-1.5 px-2 rounded-[3px] text-orange-white-light bg-[#ffffff40] ${selectedBtnId === 'btn2' ? 'active' : ''}`}
            onClick={() => handleBtnClick('btn2')}
          >
            <DayItem />
          </button>
        </div>      
      </div>
    </div>
  );
}

扩展优化（按钮数量较多时） #

如果按钮是动态生成或者数量较多，可以把按钮数据存入数组，用map循环渲染，代码更简洁：

// 定义按钮数据
const buttonList = [
  { id: 'btn1', content: <DayItem /> },
  { id: 'btn2', content: <DayItem /> },
  // 可添加更多按钮
];

// 渲染部分替换为循环
<div className="flex items-center justify-between gap-2 border flex-grow">
  {buttonList.map(btn => (
    <button
      key={btn.id}
      className={`py-1.5 px-2 rounded-[3px] text-orange-white-light bg-[#ffffff40] ${selectedBtnId === btn.id ? 'active' : ''}`}
      onClick={() => handleBtnClick(btn.id)}
    >
      {btn.content}
    </button>
  ))}
</div>

这种方式完全遵循React状态驱动的核心原则，代码更易维护、可扩展，也避免了直接操作DOM带来的潜在问题。

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