在React中如何实现点击按钮加类并移除其余按钮的对应类

现有代码的问题 #

• 初始状态赋值错误：你给useState传入的是字符串"false"而非布尔值false，非空字符串在JS逻辑判断中恒为真，会导致初始状态下所有按钮默认都带上active类
• 所有按钮共用同一个布尔状态：无法区分具体是哪个按钮被触发，只要状态变化所有按钮的类名都会同步更新，自然没法实现「仅当前点击按钮加类、其余按钮移除类」的效果
• 代码中周三的单词拼写错误，正确拼写为Wednesday

修正方案 #

把状态改成存储当前激活按钮的唯一标识，比如按钮对应的星期文本，点击时将状态更新为当前点击按钮的标识，每个按钮单独判断自身标识是否与状态存储的激活标识匹配，匹配就加active类。
修正后的代码如下：

import React, { useState } from "react";

export default function App() {
  // 初始可以设为null，代表没有默认激活的按钮，有需要也可以指定默认值比如'Sunday'
  const [activeKey, setActiveKey] = useState(null); 

  return (
    <div> 
      <button onClick={() => setActiveKey('Sunday')}  className={activeKey === 'Sunday' ? "active" : undefined}>Sunday</button>
      <button onClick={() => setActiveKey('Monday')} className={activeKey === 'Monday' ? "active" : undefined}>Monday</button> 
      <button onClick={() => setActiveKey('Tuesday')} className={activeKey === 'Tuesday' ? "active" : undefined}>Tuesday</button> 
      <button onClick={() => setActiveKey('Wednesday')} className={activeKey === 'Wednesday' ? "active" : undefined}>Wednesday</button> 
      <button onClick={() => setActiveKey('Thursday')} className={activeKey === 'Thursday' ? "active" : undefined}>Thursday</button> 
      <button onClick={() => setActiveKey('Friday')} className={activeKey === 'Friday' ? "active" : undefined}>Friday</button> 
      <button onClick={() => setActiveKey('Saturday')} className={activeKey === 'Saturday' ? "active" : undefined}>Saturday</button> 
    </div>
  );
}

如果想简化代码，也可以把星期数据存成数组遍历渲染，不用重复写7个按钮：

import React, { useState } from "react";

const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']

export default function App() {
  const [activeKey, setActiveKey] = useState(null); 

  return (
    <div> 
      {weekDays.map(day => (
        <button 
          key={day}
          onClick={() => setActiveKey(day)}  
          className={activeKey === day ? "active" : undefined}
        >
          {day}
        </button>
      ))}
    </div>
  );
}

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