如何仅改变点击的选择题选项按钮颜色（而非全部按钮）

问题原因 #

当前代码的核心问题是用单一状态isCorrectQuestion控制所有按钮的颜色——这个状态只存储"正确(1)"或"错误(2)"的数值，所有按钮都会根据这个全局值统一切换颜色，自然会出现点击一个按钮全同步变色的情况。

解决方案 #

需要修改状态来记录被点击选项的唯一标识（比如选项的alternative字段、数组索引），让每个按钮只在自己是被选中的选项时，才根据自身的isCorrect值显示对应颜色，未被选中的保持默认灰色。

具体修改步骤 #

1. 调整状态定义

把原来的isCorrectQuestion改成记录选中选项的标识，这里以选项的alternative（A/B/C/D）为例：

const questions = Questions ?? [];
// 记录选中的选项标识，初始为undefined表示未选择
const [selectedOption, setSelectedOption] = useState<string | undefined>();

2. 修改点击事件逻辑

点击按钮时，直接把当前选项的alternative值传入状态更新函数，无需单独的test函数：

onClick={() => setSelectedOption(e.alternative)}

3. 更新按钮样式判断

每个按钮独立判断自己是否是被选中的选项，再根据自身的isCorrect值设置颜色：

{questions[0].alternatives.map(e =>
  <Styles.Button
    onClick={() => setSelectedOption(e.alternative)}
    style={{
      backgroundColor:
        // 仅当当前按钮是被选中的选项时，才根据对错设置颜色
        selectedOption === e.alternative 
          ? e.isCorrect === 1 ? 'green' : 'red'
          : 'gray' // 未选中的按钮保持默认灰色
    }}
  >
    {e.answer}
  </Styles.Button>
)}

另一种实现方式（用数组索引标识） #

如果不想用alternative字段，也可以用数组索引作为选中标识，逻辑完全一致：

const [selectedIndex, setSelectedIndex] = useState<number | undefined>();

{questions[0].alternatives.map((e, index) =>
  <Styles.Button
    onClick={() => setSelectedIndex(index)}
    style={{
      backgroundColor:
        selectedIndex === index 
          ? e.isCorrect === 1 ? 'green' : 'red'
          : 'gray'
    }}
  >
    {e.answer}
  </Styles.Button>
)}

核心逻辑总结 #

不再用全局的对错状态控制所有按钮，而是让每个按钮独立判断自己是否是用户点击的选项，再结合自身的正确属性渲染颜色，这样就只会改变被点击按钮的样式。

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