React测验应用点击选项时所有答案背景色同步变更问题求助

问题根源在于你用了一个全局的color状态控制所有答案按钮的样式——所有按钮绑定同一个状态值，状态切换时所有按钮样式会同步变化。要实现单个按钮单独变色，需要追踪具体被选中的答案，而非用布尔值控制全局。

修改方案 #

1. 将状态从布尔值改为记录选中的答案内容（或唯一标识）
2. 点击按钮时传递当前答案内容，更新选中状态
3. 每个按钮单独判断自身是否为选中项，再应用对应样式

修改后的QuizPage组件代码 #

import React from "react";

function QuizPage({ item }) {
  // 用状态记录选中的答案内容，初始为空
  const [selectedAnswer, setSelectedAnswer] = React.useState("");

  // 点击时传递当前答案，更新选中状态
  function handleClick(answer) {
    setSelectedAnswer(answer);
  }

  // 动态生成单个按钮的样式
  const getButtonStyle = (answer) => ({
    backgroundColor: selectedAnswer === answer ? "teal" : "",
    color: selectedAnswer === answer ? "white" : ""
  });

  return (
    <div className="quiz--page">
      <h1>{item.question}</h1>
      <div className="answer-btn">
        <button 
          onClick={() => handleClick(item.correct_answer)} 
          style={getButtonStyle(item.correct_answer)}
        >
          {item.correct_answer}
        </button>
        {item.incorrect_answers.map((ia, index) => (
          <button 
            key={index} 
            onClick={() => handleClick(ia)} 
            style={getButtonStyle(ia)}
          >
            {ia}
          </button>
        ))}
      </div>
      <hr className="solid"></hr>
    </div>
  );
}

export default QuizPage;

补充功能（可选） #

如果需要支持「取消选中」，可以修改点击事件逻辑：

function handleClick(answer) {
  setSelectedAnswer(prev => prev === answer ? "" : answer);
}

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