如何在 React 问答组件中为单次点击的选项添加独立高亮效果

本文详解如何在 react 多题型测验应用中，为每个问题的选项实现独立、互斥的背景高亮——即用户点击某选项时仅该题内该选项变色，其他题目不受影响，且同一题内再次点击不同选项时自动取消前一个高亮。

本文详解如何在 react 多题型测验应用中，为每个问题的选项实现**独立、互斥的背景高亮**——即用户点击某选项时仅该题内该选项变色，其他题目不受影响，且同一题内再次点击不同选项时自动取消前一个高亮。

在构建 React 测验（Quiz）应用时，一个常见但易被忽视的关键交互需求是：每个问题的选项应独立维护选中状态。你遇到的问题——“点击一个题的选项，所有题的对应位置选项都变色”或“选项顺序错乱”——根本原因在于：全局共享了单一状态 isClickedIndex，且未按题目维度隔离状态管理。

❌ 错误根源分析

原代码中：

const [isClickedIndex, setIsClickedIndex] = useState(-1); // 全局唯一索引

该状态被所有题目共用。当第 1 题的第 2 个选项被点击（index=1），isClickedIndex 变为 1；此时渲染第 3 题时，其第 2 个 <li>（同样 index=1）也会匹配 className={option ${isClickedIndex === index ? “active” : “”}“，导致跨题误高亮。

此外，createRandomOptions() 在每次渲染时重新打乱顺序，而 map((option, index) => …) 中的 index 是数组下标而非稳定标识，导致“视觉位置跳动”——这并非 UI 错乱，而是状态与动态生成的 DOM 索引耦合过紧所致。

✅ 正确解法：按题隔离 + 唯一标识

我们应为每道题单独维护其当前选中选项的 ID（如选项文本或唯一 hash），而非全局索引。以下是优化后的核心逻辑：

1. 修改状态结构：使用对象映射题目 ID → 选中选项

const [selectedOptions, setSelectedOptions] = useState({}); // { questionId: "selected text" }  // 假设 eachQuiz 有唯一 id（若 API 无提供，可用数组索引 + 时间戳生成） function handleOptionClick(questionId, optionText) {   setSelectedOptions(prev => ({     ...prev,     [questionId]: optionText   })); }

2. 渲染时基于题目 ID 判断激活状态

{quiz && quiz.map((eachQuiz, questionIndex) => {   const questionId = `q-${questionIndex}`; // 稳定标识   const correctOption = eachQuiz.correct_answer;   const allOptions = [...eachQuiz.incorrect_answers, correctOption];   const randomOptions = createRandomOptions(allOptions);    return (     <div key={questionId} className="quiz-wrapper">       <p className="question">{eachQuiz.question}</p>       <ul>         {randomOptions.map((option, optionIndex) => (           <li             key={`${questionId}-opt-${optionIndex}`} // 唯一 key             className={`option ${selectedOptions[questionId] === option ? "active" : ""}`}             onClick={() => handleOptionClick(questionId, option)}           >             {option}           </li>         ))}       </ul>     </div>   ); })}

3. CSS 样式定义（推荐）

.option {   padding: 12px 16px;   margin: 4px 0;   border-radius: 6px;   cursor: pointer;   transition: background-color 0.2s ease; }  .option.active {   background-color: #4a90e2;   color: white; }

⚠️ 注意：切勿使用 :checked 伪类
原答案建议的 option:checked { color: red; } 不适用于 <li> 元素——:checked 仅对 <input type=”radio/checkbox”> 生效。若改用原生表单控件（更语义化且支持无障碍），可这样写：

<input    type="radio"    name={`question-${questionId}`}    id={`opt-${questionId}-${optionIndex}`}    checked={selectedOptions[questionId] === option}   onChange={() => handleOptionClick(questionId, option)} /> <label htmlFor={`opt-${questionId}-${optionIndex}`}>{option}</label>

并配合 CSS：input[type=”radio”]:checked + label { background: #4a90e2; }

✅ 额外优化建议

• 避免重复打乱：将 randomOptions 计算移至 useMemo，防止无意义重排：

  const randomOptions = useMemo(() => createRandomOptions(allOptions), [allOptions]);

• 重置逻辑：点击“Play Again”时，直接 setSelectedOptions({}) 即可清空全部题目选中状态。
• 性能提示：若题目量极大（>50），可考虑 React.memo 包裹单题组件。

通过为每道题分配独立状态槽位，并用稳定标识（而非动态索引）关联选项，即可彻底解决跨题污染与顺序错乱问题。这种模式也易于扩展——例如后续增加“答案解析”、“逐题提交”等功能时，状态边界依然清晰可控。