React测验应用中按钮多背景色设置问题

数据老陈

2026-8-15

测验应用答案样式修复方案

问题根源

你之前的条件样式逻辑没区分「用户选中的答案」和「正确答案」的互斥场景，导致所有按钮都触发了样式规则。

修复步骤

确保组件状态传递正确
每个Question组件需要拿到三个核心状态：
- userAnswer: 用户当前选中的答案
- correctAnswer: 该题的正确答案
- isChecked: 是否已经点击「检查答案」按钮

修正按钮的条件样式判断
在映射答案按钮时，精准判断每个按钮的样式触发条件：

{answers.map(answer => (
  <button
    key={answer}
    className={`answer-btn ${
      isChecked
        ? userAnswer === answer
          ? "user-selected"
          : correctAnswer === answer
            ? "correct-unselected"
            : ""
        : userAnswer === answer
          ? "pre-selected"
          : ""
    }`}
    onClick={() => handleSelectAnswer(answer)}
    disabled={isChecked}
  >
    {answer}
  </button>
))}

添加对应CSS样式
在样式文件中定义三种状态的样式：

.answer-btn {
  padding: 0.5rem 1rem;
  border: 1px solid #d6dbf5;
  border-radius: 0.5rem;
  margin-right: 0.75rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
  background-color: white;
}

/* 未检查时选中的样式 */
.pre-selected {
  background-color: #d6dbf5;
}

/* 检查后用户选中的答案（无论对错） */
.user-selected {
  background-color: #94d7a2;
}

/* 检查后正确但未被用户选中的答案 */
.correct-unselected {
  background-color: #f8bcbc;
}