React开发：如何在handleClick函数中访问其他元素？

直接操作DOM修改按钮样式不符合React数据驱动的设计理念，还会导致难以同步控制其他按钮状态。我们可以通过状态管理UI的方式实现需求：

步骤1：新增状态管理按钮状态 #

在组件内添加一个状态，用来记录每个按钮的状态（正确/错误/无状态）：

const [answerStates, setAnswerStates] = useState({});
// 结构示例：{ 0: 'incorrect', 2: 'correct' } 代表索引0的按钮标记为错误，索引2的按钮标记为正确

步骤2：修改按钮渲染逻辑 #

遍历生成按钮时，根据状态动态设置背景色，同时添加点击禁用规则（避免重复操作）：

const listOfAnswers = questions[questionNumber].possibleAnswers.map((obj, i, arr) => {
  // 根据状态返回对应背景色
  const getBgColor = () => {
    if (answerStates[i] === 'correct') return 'green';
    if (answerStates[i] === 'incorrect') return 'red';
    return '';
  };

  return (
    <Button
      key={i}
      style={{
        margin: '15px 0',
        backgroundColor: getBgColor()
      }}
      variant='contained'
      onClick={() => handleClick(obj, i, arr)}
      disabled={Object.keys(answerStates).length > 0}
    >
      {obj.answer}
    </Button>
  );
});

步骤3：重写handleClick函数 #

在点击事件中，通过状态同时控制错误按钮和正确按钮的样式：

const handleClick = async (obj, index, arr) => {
  const newStates = {};
  if (obj.isCorrect) {
    // 点击正确答案：标记当前按钮为正确，更新分数
    setScore(prevScore => prevScore + 1);
    newStates[index] = 'correct';
  } else {
    // 点击错误答案：标记当前按钮为错误，同时找到正确答案并标记
    newStates[index] = 'incorrect';
    const correctIdx = arr.findIndex(item => item.isCorrect);
    newStates[correctIdx] = 'correct';
  }

  // 更新状态触发UI变化
  setAnswerStates(newStates);
  // 等待一段时间后重置状态，切换下一题
  await delay(1000);
  setAnswerStates({});
  nextQuestion();
};

方案优势 #

• 用状态管理替代直接DOM操作，符合React设计逻辑，避免DOM操作带来的不可预测问题。
• 无需手动查找其他DOM元素，就能同步控制所有按钮的状态。
• 新增的禁用逻辑可防止用户在单次答题中重复点击，优化交互体验。

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