循环生成的按钮点击时仅切换当前按钮背景色的实现问题

你当前代码的问题在于用了单个布尔值状态clicked，所有按钮的样式都依赖这个状态，所以点击任意按钮都会触发所有按钮的背景色变化。要实现仅修改被点击按钮的样式，需要把状态改成存储被点击按钮的唯一标识（比如索引或按钮对应的值），而不是一个全局的布尔值。

方案一：用索引标识选中的按钮 #

如果times数组的顺序不会动态变化，用索引是最简单的方式：

import { useState } from 'react';

// 初始值设为null，表示没有按钮被选中
const [clickedIndex, setClickedIndex] = useState(null);

<div className="flex gap-4 flex-wrap">
    {times.map((time, i) => (
            <div
                key={`time-${i}`}
                className={`${clickedIndex === i ? 'bg-slate-400' : 'bg-light-gold'}`}
                onClick={() => { 
                    // 点击已选中的按钮时取消选中，否则设置为当前索引
                    setClickedIndex(clickedIndex === i ? null : i) 
                }}
             >
                    {time}
            </div>
    ))}
</div>

方案二：用按钮对应的值标识选中状态 #

如果times数组里的每个time都是唯一值（比如不同的时间字符串），用time本身作为标识会更可靠（避免数组顺序变化导致索引失效）：

import { useState } from 'react';

const [clickedTime, setClickedTime] = useState(null);

<div className="flex gap-4 flex-wrap">
    {times.map((time, i) => (
            <div
                key={`time-${i}`}
                className={`${clickedTime === time ? 'bg-slate-400' : 'bg-light-gold'}`}
                onClick={() => { 
                    setClickedTime(clickedTime === time ? null : time) 
                }}
             >
                    {time}
            </div>
    ))}
</div>

代码说明 #

• 状态存储的是当前选中按钮的唯一标识，而非全局布尔值，这样每个按钮可以独立判断自己是否被选中
• 点击事件中加入了“再次点击取消选中”的逻辑，如果不需要这个功能，直接把setClickedIndex(i)或setClickedTime(time)写进去即可

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