React.js：单击答案选项会切换所有选项的颜色，而不仅仅是单击选项

如何解决React.js：单击答案选项会切换所有选项的颜色，而不仅仅是单击选项

目前，在我的测验页面上，所有答案选项在单击时都会着色。但是，只有单一答案选项应根据其正确性重新着色。数据是从 data.json 数组中提取的。

export default function QuizCard({ title,scenario,question,answers }) {
  const [bgColor,setBgColor] = useState('gray')
  function handleAnswerClick(isCorrect) {
    if (isCorrect === true) {
      setBgColor('green')
    } else {
      setBgColor('red')
    }
  }
  return (
    <>
      <Card bgColor={bgColor}>
        <h2>{title}</h2>
        <p>{scenario}</p>
        <h3>{question}</h3>
        <AnswerSection>
          {answers.map((answer => (
            <AnswerButton
              key={index}
              onClick={() => handleAnswerClick(answer.isCorrect)}
              isCorrect={answer.isCorrect}
              bgColor={bgColor}
            >
              {answer.answerText}
            </AnswerButton>
          ))}
        </AnswerSection>
      </Card>

我需要做什么才能根据其正确性以红色或绿色突出显示所选答案，而不需要重新着色所有其他选项？

非常感谢您的帮助，并对这个含糊不清的问题表示歉意。我在 2 个月前开始编码，但我对术语还不太熟悉。

解决方法

您正在为所有应答按钮设置“bgColor”。相反，您应该仅为正确答案设置 bgColor 以仅对其进行着色。对 bgColor 逻辑稍作修改即可。

export default function QuizCard({ title,scenario,question,answers }) {
  const [bgColor,setBgColor] = useState('gray')
  function handleAnswerClick(isCorrect) {
    if (isCorrect === true) {
      setBgColor('green')
    } else {
      setBgColor('red')
    }
  }
  return (
    <>
      <Card bgColor={bgColor}>
        <h2>{title}</h2>
        <p>{scenario}</p>
        <h3>{question}</h3>
        <AnswerSection>
          {answers.map((answer => (
            <AnswerButton
              key={answer.answerText}
              onClick={() => handleAnswerClick(answer.isCorrect)}
              isCorrect={answer.isCorrect}
              bgColor={answer.isCorrect ? bgColor : 'gray'} // assign bgColor in state only to the right answer and for others use gray as default
            >
              {answer.answerText}
            </AnswerButton>
          ))}
        </AnswerSection>
      </Card>

,

你可以这样做：

export default function QuizCard({ title,setBgColor] = useState('gray')
  const [selectAnswer,setSelectAnswer] = useState(null)
  const handleAnswerClick = (isCorrect,answer) => {
    if (isCorrect === true) {
      setBgColor('green')
    } else {
      setBgColor('red')
    }
    setSelectAnswer(answer)
  }

  return (
    <>
      <Card bgColor={bgColor}>
        <h2>{title}</h2>
        <p>{scenario}</p>
        <h3>{question}</h3>
        <AnswerSection>
          {answers.map(answer => (
            <AnswerButton
              key={answer.answerText}
              onClick={() =>
                handleAnswerClick(answer.isCorrect,answer.answerText)
              }
              isCorrect={answer.isCorrect}
              bgColor={answer.answerText === selectAnswer ? bgColor : 'gray'} // assign bgColor in state only to the right answer and for others use gray as default
            >
              {answer.answerText}
            </AnswerButton>
          ))}
        </AnswerSection>
      </Card>
    </>
  )
}