React 答题应用开发问题：共用同一onClick函数时如何单独修改点击按钮的背景样式

我明白你遇到的问题了——现在你的全局状态isAnswered和bgAnswered会让所有按钮统一变色，这确实不是你想要的效果。咱们只需要调整状态管理，跟踪具体被点击的选项，而不是用全局颜色状态，就能实现只改变点击按钮的背景色。

具体修改步骤： #

1. 添加跟踪选中选项的状态
   首先，我们需要一个状态来记录用户点击的具体选项，替代原来的全局颜色状态：

   const [selectedOption, setSelectedOption] = useState(null);
   

2. 修改点击事件处理函数
   把handleAnswerClick的参数从elem.isCorrect改成整个elem对象，这样我们能精准定位用户点击的选项。同时移除全局的bgAnswered状态：

   const handleAnswerClick = (selectedElem) => {
     setIsAnswered(true);
     setSelectedOption(selectedElem); // 记录被点击的选项
     // 用函数式更新分数，避免依赖旧状态值的问题
     if (selectedElem.isCorrect) {
       setScore(prevScore => prevScore + 1);
     }
     setTimeout(() => findNextQuestion(), 1000);
   };
   
   const findNextQuestion = () => {
     setIsAnswered(false);
     setSelectedOption(null); // 重置选中状态，确保下一题无残留
     const nextQuestion = currentQuestionNumber + 1;
     if (nextQuestion === questions.length) {
       setShowScore(true);
     } else {
       setCurrentQuestionNumber(nextQuestion);
     }
   };
   

3. 调整按钮的样式逻辑
   在渲染按钮时，判断当前按钮对应的选项是不是用户选中的selectedOption，如果是，再根据它的isCorrect属性设置背景色，否则保持默认样式：

   <div className='answer-Section'>
     {currentQuestion.answerOptions.map((elem) => (
       <button
         key={elem.id} // 务必添加唯一key，避免React列表渲染警告
         className='answer-Button'
         onClick={() => handleAnswerClick(elem)}
         style={{
           backgroundColor: selectedOption === elem 
             ? elem.isCorrect ? 'green' : 'red' 
             : bgNeutral,
         }}
         disabled={isAnswered} // 可选：答题后禁用所有按钮，防止重复点击
       >
         {elem.answerText}
       </button>
     ))}
   </div>
   

额外优化提示： #

• 确保你的answerOptions数组里的每个选项对象有唯一标识（比如id字段），这样key属性能正常工作，提升React渲染效率。
• 新增的disabled={isAnswered}可以防止用户在提交答案后重复点击选项，优化交互体验。

这样修改后，只有用户点击的那个按钮会根据对错变成绿色或红色，其他按钮保持原有样式，完全符合你的需求！

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