React点击按钮添加active class时所有按钮都激活如何修复

根因分析 #

• 激活态判断维度不足：仅用按钮在当前组内的索引i作为判断依据，所有循环生成的按钮组共用同一个clickedId状态，只要索引匹配就会触发激活，导致多组按钮同时高亮
• 没有绑定外层循环的index2维度，无法唯一标识具体是哪一组下的哪一个按钮被点击

修复步骤 #

1. 调整状态存储结构 #

将单一数字类型的clickedId改为可同时记录外层索引、按钮索引的结构，支持唯一标识按钮：

// 原写法
// const [clickedId, setClickedId] = useState(-1)
// 调整后
const [activeBtnKey, setActiveBtnKey] = useState(null)

2. 点击事件补充外层索引参数 #

修改handleClick的传参与逻辑，同时记录按钮所属的外层item索引：

const handleClick = (event, itemIndex, btnIndex) => {
  setActiveBtnKey([itemIndex, btnIndex])
  // 保留原有其他业务逻辑，比如调用传入的doSomethingAfterClick方法
}

// 渲染时修改onClick传参
onClick={(event) => handleClick(event, index2, i)}

3. 更新激活态判断规则 #

匹配两层索引才能命中激活态，避免跨组激活的问题：

className={
  activeBtnKey?.[0] === index2 && activeBtnKey?.[1] === i
    ? 'py-4 pl-3 customButton active '
    : 'customButton py-4 pl-3'
}

可选优化 #

如果需求是全局仅允许一个按钮激活，也可以直接用字符串拼接的方式生成唯一标识：

// 存储激活标识
setClickedId(`${index2}-${i}`)
// 激活判断
className={clickedId === `${index2}-${i}` ? 'py-4 pl-3 customButton active ' : 'customButton py-4 pl-3'}

另外建议修改按钮的key属性，不要仅用索引i，最好结合业务唯一值拼接，避免列表重排时出现渲染异常。

补充检查：你当前组件调用时传入的buttons={[category.categories]}如果category.categories本身就是数组，不需要额外套一层方括号，否则按钮组永远只会渲染一个按钮。

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