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