React测验应用：如何用单个State管理单选按钮的条件类名？

核心优化思路 #

不用为每个按钮单独维护State，只需要一个State记录当前选中的选项标识（如"A"/"B"/"C"/"D"），渲染时动态判断按钮是否为选中状态，从而应用高亮样式。

优化后的完整代码示例 #

import { useState } from 'react';

function QuizPage() {
  // 存储当前选中的选项标识
  const [selectedOption, setSelectedOption] = useState(null);
  // 原有的存储用户最终选择的State
  const [optionChosen, setOptionChosen] = useState(null);

  const handleOptionClick = (op) => {
    setSelectedOption(op);
    setOptionChosen(op);
  };

  // 可选：将当前题目选项整理为数组，简化渲染逻辑
  const currentQuestionOptions = [
    { key: "A", text: questions[currentQuestion].optionA },
    { key: "B", text: questions[currentQuestion].optionB },
    { key: "C", text: questions[currentQuestion].optionC },
    { key: "D", text: questions[currentQuestion].optionD },
  ];

  return (
    <div>
      {/* 方式1：数组循环渲染，扩展性更强 */}
      {currentQuestionOptions.map((option) => (
        <button
          key={option.key}
          // 动态判断是否添加高亮类名（示例类名为"selected"）
          className={selectedOption === option.key ? "selected" : ""}
          onClick={() => handleOptionClick(option.key)}
        >
          {option.text}
        </button>
      ))}

      {/* 方式2：直接编写单个按钮，适合不想重构渲染逻辑的场景 */}
      {/* <button
        className={selectedOption === "A" ? "selected" : ""}
        onClick={() => handleOptionClick("A")}
      >
        {questions[currentQuestion].optionA}
      </button>
      <button
        className={selectedOption === "B" ? "selected" : ""}
        onClick={() => handleOptionClick("B")}
      >
        {questions[currentQuestion].optionB}
      </button>
      <button
        className={selectedOption === "C" ? "selected" : ""}
        onClick={() => handleOptionClick("C")}
      >
        {questions[currentQuestion].optionC}
      </button>
      <button
        className={selectedOption === "D" ? "selected" : ""}
        onClick={() => handleOptionClick("D")}
      >
        {questions[currentQuestion].optionD}
      </button> */}
    </div>
  );
}

关键优化点说明 #

• 合并State：用单个selectedOption替代原有的多个按钮State，彻底简化状态管理，避免重复的重置逻辑。
• 动态类名判断：每个按钮通过selectedOption === 当前选项key自动判断是否高亮，无需手动清空其他按钮状态。
• 扩展性提升：用数组循环渲染按钮后，后续选项数量变化时，只需修改数组内容，无需调整渲染代码。
• 简化点击逻辑：点击函数只需更新选中状态，删除了冗长的if-else分支，代码更简洁易维护。

高亮样式示例 #

在CSS中定义统一的高亮类样式即可：

.selected {
  background-color: #4CAF50;
  color: #fff;
  border-color: #3d8b40;
}

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