有没有办法为一组按钮添加一个活动的 class onClick？

Question

我通过按键阵列 map 得到三个按键。 我想要实现的是能够识别单击了哪个按钮并添加了一个活动的 class

import React from "react";
import { useState } from "react";
import style from "./years.module.scss";

const Years = props => {
 const [activeClass, setActiveClass] = useState(null);
 const buttons = ["year one", "year two", "year three"];



return (
 <div className={style.box}>
   {buttons.map((button, index) => {
       console.log(index,button)
     return (
       <button key={index} className={`${style.btn} ${style.active}`} >
         {button}
        </button>
     );
   })}
</div>
);
};

export default Years;

我使用 css 模块来设置按钮样式

Answer 1

只需将处理程序与每个按钮连接 - 如果单击，state 将更改并存储活动按钮的index 。 如果它处于活动状态 - 添加 class。

const changeActiveButton = (i) => () => {
   setActiveClass(i);
};

<button 
   onClick={changeActiveButton (index)}
   className={`${style.btn} ${index === activeClass ? style.active : ''}`}
>

Answer 2

<button key={index} className={`${style.btn} ${style.active}`} onClick={()=>setActiveClass(button)} >
  {button}
</button>