React Quizcard组件点击答案选项修改背景色首次点击不生效问题咨询

问题根因 #

你遇到的首次点击样式不生效、第二次才生效的问题，核心原因是手动操作DOM修改样式和React重渲染逻辑冲突：

• 首次点击答案时，你先通过e.currentTarget.style/classList修改了真实DOM的样式，随后调用的checkAnswer会触发父组件更新hasChosen属性，进而触发当前Quizcard组件重渲染
• React重渲染时会根据JSX定义的虚拟DOM结构还原真实DOM，你手动修改的样式没有定义在JSX逻辑中，直接被重置回初始状态，所以首次点击看不到效果
• 第二次点击时hasChosen已经为true，不会再触发checkAnswer导致重渲染，手动修改的样式就保留了下来，所以能看到效果

修复方案 #

React中所有展示层逻辑都应该用状态驱动，不要直接操作DOM，修改步骤如下：

1. 新增状态存储用户选中的答案，替换当前没用的isCorrect状态

// 原来的 const [isCorrect, setIsCorrect] = useState(null) 替换为
const [selectedAnswer, setSelectedAnswer] = useState(null)

2. 改写handleClick逻辑，移除DOM操作，改为存储用户选中的答案

const handleClick = (e, answer, correct_answer, corrAnswerReference) => {
    if (hasChosen) return
    setSelectedAnswer(answer)
    checkAnswer(e, answer, correct_answer, corrAnswerReference)
}

3. 调整答案span的className判断逻辑，新增错误选项的样式规则

<span
  ref={answer === correct_answer ? corrAnswerReference : null}
  key={index}
  className={`flex justify-start align-right text-right content-center items-center relative ${
    !gameFinished && hasChosen
      ? answer === correct_answer
        ? 'bg-green-400'
        : answer === selectedAnswer
        ? 'bg-red-400'
        : ''
      : ''
  }`}
  onClick={e => handleClick(e, answer, correct_answer, corrAnswerReference)}
>
{/* 内部原有逻辑不变 */}
</span>

修改后所有样式都由React状态统一管控，重渲染时不会丢失样式，首次点击就能正常展示正确/错误对应的背景色。

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