React 问答组件点击高亮实现方法

此外，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; } 不适用于

元素——: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 包裹单题组件。

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

理论要掌握，实操不能落！以上关于《React 问答组件点击高亮实现方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！