如果我将相同的 onClick 函数附加到多个按钮，如何使用 onClick 函数定位特定按钮的样式？

Question

我正在尝试在 React 中创建一个 Trivia 应用程序，但在用户从给定选项中选择答案后，我无法更改背景颜色。我正在尝试通过一些个人更改来做 freeCodeCamp 的测验应用程序。

它目前所做的是将每个按钮着色为绿色或红色，具体取决于答案是正确还是错误，我只想针对已通过 backgroundColor 更改单击的特定按钮，其余部分保持原样.

所以，在这里我有一个 div，我在其中绘制了不同按钮上的答案选项：

        <div className='answer-Section'>
          {currentQuestion.answerOptions.map((elem) => (
            <button
              className='answer-Button'
              onClick={() => handleAnswerClick(elem.isCorrect)}
              style={{
                backgroundColor: isAnswered ? bgAnswered : bgNeutral,
              }}
            >
              {elem.answerText}
            </button>
          ))}
        </div>

这里是映射按钮上的 onClick 事件处理程序：

const handleAnswerClick = (isCorrect) => {
setIsAnswered(true)
isCorrect ? setScore(score + 1) : setScore(score)
isCorrect ? setBgAnswered('green') : setBgAnswered('red')
setTimeout(() => findNextQuestion(), 1000)}


const findNextQuestion = () => {
setIsAnswered(false)
const nextQuestion = currentQuestionNumber + 1
if (nextQuestion === questions.length) {
  setShowScore(true)
} else {
  setCurrentQuestionNumber(nextQuestion)
}}

Answer 1

有几种方法可以做到这一点。最简单的方法是不仅存储是否问题被回答，而且还存储选择了哪个答案。在下面的代码中，我也避免使用 bgAnswered 状态变量，而是只计算所需的内联颜色。

        [answer, setAnswer] = useState();
        //...
        <div className='answer-Section'>
          {currentQuestion.answerOptions.map((elem, i) => (
            <button
              className='answer-Button'
              onClick={() => handleAnswerClick(elem.isCorrect, i)}
              style={{
                backgroundColor: answer === i ? (elem.isCorrect ? 'green' : 'red') : bgNeutral,
              }}
            >
              {elem.answerText}
            </button>
          ))}
        </div>

const handleAnswerClick = (isCorrect, i) => {
  setAnswer(i);
  if (isCorrect) setScore(score + 1);
  setTimeout(() => findNextQuestion(), 1000)
};

另一种选择是将bgAnswered 制成一个值数组，每个答案一个值。但在这种情况下，这似乎是不必要的。