如何为数组映射生成的单个按钮切换CSS类？

问题根源 #

你当前使用单个布尔值isPressed作为全局状态，所有通过map生成的按钮都会共享这个状态，所以点击任意按钮都会触发所有按钮同步切换样式类。

解决方案 #

把状态改为存储当前选中按钮的唯一标识（比如同义词文本syn、数组索引index，确保每个按钮有可区分的唯一值），再让每个按钮判断自身标识是否与状态匹配，从而决定是否添加active类。

示例1：单选模式（仅允许选中一个按钮）

1. 先修改状态定义：

// 初始化状态为null，表示无按钮选中
const [selectedSyn, setSelectedSyn] = useState(null);

2. 调整按钮映射代码：

<div className='synonym-keeper'>
    {synArr.map((syn) => (
        <button
            key={syn} // 必须添加唯一key，避免React渲染警告
            className={`synonym ${selectedSyn === syn ? 'active' : ''}`}
            onClick={() => {
                // 点击时切换选中状态：已选中则取消，未选中则标记为选中
                setSelectedSyn(selectedSyn === syn ? null : syn);
            }}
        >
            {syn}
        </button>
    ))}
</div>

示例2：多选模式（允许同时选中多个按钮）

如果需要支持多按钮同时选中，将状态改为数组存储所有选中的标识：

// 初始化空数组，表示无按钮选中
const [selectedSyns, setSelectedSyns] = useState([]);

// 按钮映射部分
<div className='synonym-keeper'>
    {synArr.map((syn) => (
        <button
            key={syn}
            className={`synonym ${selectedSyns.includes(syn) ? 'active' : ''}`}
            onClick={() => {
                setSelectedSyns(prevState => {
                    if (prevState.includes(syn)) {
                        // 已选中，从数组中移除该标识
                        return prevState.filter(item => item !== syn);
                    } else {
                        // 未选中，将标识加入数组
                        return [...prevState, syn];
                    }
                });
            }}
        >
            {syn}
        </button>
    ))}
</div>

额外提示 #

如果synArr中存在重复的同义词，建议使用数组索引index作为唯一标识（或每个同义词对应的唯一ID），避免状态判断出错。比如用索引的话，状态改为selectedIndex，判断条件改为selectedIndex === index即可。

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