React问答应用：点击错误选项时如何高亮正确按钮？

在React里直接操作DOM元素样式并不是最佳实践，更推荐用状态驱动UI的方式来实现需求，这样能轻松控制所有按钮的样式状态，不需要手动查找DOM元素。

步骤1：添加状态变量 #

先在组件里新增两个状态，分别跟踪选中的答案和是否显示反馈样式：

import { useState } from 'react';

// ... 其他组件代码

const [selectedAnswer, setSelectedAnswer] = useState(null);
const [showFeedback, setShowFeedback] = useState(false);

步骤2：修改点击事件处理函数 #

不再直接操作e.target，而是通过更新状态来触发UI变化：

const handleClick = async (answer) => {
  // 如果是正确答案，更新分数
  if (answer.isCorrect) {
    setScore(prevScore => prevScore + 1);
  }
  
  // 记录选中的答案，并开启反馈显示
  setSelectedAnswer(answer);
  setShowFeedback(true);
  
  // 等待1.5秒后重置状态
  await delay(1500);
  setShowFeedback(false);
  setSelectedAnswer(null);
};

步骤3：根据状态渲染按钮样式 #

遍历答案时，根据当前状态判断每个按钮的样式：

const listOfAnswers = questions[questionNumber].possibleAnswers.map((q) => {
  let buttonStyle = {};
  
  // 只有在显示反馈的阶段才设置颜色
  if (showFeedback) {
    // 正确答案始终变绿
    if (q.isCorrect) {
      buttonStyle.backgroundColor = 'green';
    }
    // 选中的错误答案变红
    else if (selectedAnswer === q) {
      buttonStyle.backgroundColor = 'red';
    }
  }

  return (
    <Button                
      onClick={() => handleClick(q)}
      style={buttonStyle}
    >
      {q.answer}
    </Button>
  )
})

为什么这个方案更好？ #

• 符合React的声明式编程思想，UI完全由状态控制，避免了手动操作DOM的副作用。
• 不需要传递DOM相关参数或查找元素，逻辑更清晰，也更容易维护。
• 天然支持多按钮的样式控制，轻松实现“错误按钮变红+正确按钮变绿”的需求。

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