如果我將相同的 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變成一組值，每個答案一個。 但在這種情況下，這似乎是不必要的。