React使用map渲染的按钮点击时如何为对应元素单独添加类

核心问题原因 #

你当前的实现中所有按钮共享同一个buttonClass全局状态，所以只要状态更新，所有按钮的类都会同步变更。

解决方案 #

将状态调整为存储「用户已点击的答案值」，渲染时每个按钮独立判断自己需要绑定的样式类即可，完美适配多答案扩展场景。修改后的完整代码如下：

import React, { useState } from 'react';
import { Button } from 'react-bootstrap';
import './css/GameAnswers.css';

type Answers = {
    arrayAnswers: Array<string>,
    correctAnswer: string
}

function GameAnswers(props: Answers)
{
    // 状态改为存储用户点击的答案，初始为未点击状态
    const [selectedAnswer, setSelectedAnswer] = useState<string | null>(null);

    function submitAnswer(clickedAnswer: string)
    {
        setSelectedAnswer(clickedAnswer);
    }

    return (
        <div className="game-answers">
            {props.arrayAnswers.map(function(answer){
                // 每个按钮独立判断自己的样式类
                let extraClass = '';
                if (selectedAnswer === answer) {
                    extraClass = answer === props.correctAnswer ? 'btn-success' : 'btn-danger';
                }
                return <Button 
                    className={`game-answer ${extraClass}`} 
                    key={answer}
                    onClick={() => submitAnswer(answer)}
                >
                    {answer}
                </Button>;
            })}
        </div>
    );
}

export default GameAnswers;

修改说明 #

• 调整状态存储逻辑：将原有的全局样式类状态，替换为存储用户选中的答案值，仅记录用户操作行为，样式判断逻辑下沉到每个按钮的渲染环节。
• 优化点击事件传参：在map循环中直接把当前遍历的答案值传给点击回调，避免从event.target读取属性可能出现的冒泡、target指向偏差问题。
• 自动适配多答案场景：不管后续arrayAnswers扩展到多少个选项，逻辑都无需修改，每个按钮只会在自己被选中时添加对应样式类。
• 补充了按钮的key属性，符合React列表渲染的规范要求，避免渲染异常。

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