React中如何为选中按钮及正确选项分配对应类名？

核心思路 #

用两个状态变量控制交互逻辑：

• selectedAnswer：记录用户点击的选项文本
• isAnswered：标记是否已作答，用来触发样式切换和禁止重复点击

完整组件代码 #

import { useState } from 'react';

const QuizQuestion = () => {
  // 题目数据（已翻译为中文）
  const quizData = {
    data: [
      {
        question: "1+1等于多少？",
        answers: [
          { text: "3", correct: false },
          { text: "2", correct: true }
        ]
      }
    ]
  };

  const [selectedAnswer, setSelectedAnswer] = useState(null);
  const [isAnswered, setIsAnswered] = useState(false);
  const currentQuestion = quizData.data[0];

  const handleAnswerClick = (answer) => {
    if (isAnswered) return; // 已作答后禁止重复点击
    setSelectedAnswer(answer.text);
    setIsAnswered(true);
  };

  // 动态判断按钮类名
  const getButtonClass = (answer) => {
    if (!isAnswered) return '';
    if (answer.correct) return 'correct';
    if (answer.text === selectedAnswer && !answer.correct) return 'wrong';
    return '';
  };

  return (
    <div className="quiz-container">
      <h3>{currentQuestion.question}</h3>
      <div className="answers-container">
        {currentQuestion.answers.map((answer, index) => (
          <button
            key={index}
            className={`answer-btn ${getButtonClass(answer)}`}
            onClick={() => handleAnswerClick(answer)}
            disabled={isAnswered}
          >
            {answer.text}
          </button>
        ))}
      </div>
    </div>
  );
};

export default QuizQuestion;

关键逻辑说明 #

1. 状态控制：

   • isAnswered 既用来防止重复点击，也作为样式切换的触发开关
   • selectedAnswer 记录用户选中的选项，用于定位错误选项并添加样式

2. 类名规则：

   • 未作答时按钮无额外类名
   • 已作答后，正确选项直接加 correct 类
   • 用户选中的错误选项加 wrong 类，其余错误选项保持默认样式

3. 配套样式示例（可自定义）：

.correct {
  background-color: #4CAF50;
  color: #fff;
}

.wrong {
  background-color: #f44336;
  color: #fff;
}

.answer-btn {
  margin: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.answer-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

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