javascript - 为所选元素分配一个类名，并在 React 中分配正确的类名

Question

假设我有一个如下所示的 JSON 文件:

{
  "data": [
    {
      "question": "What's 1+1",
      "answers": [
        {
          "text": "3",
          "correct": false
        },
        {
          "text": "2",
          "correct": true
        }
      ]
     }
   ]
}

在我的代码中，我迭代这些答案并为每个答案呈现一个按钮。每个按钮还接收一个点击处理程序，如下所示。当您单击一个按钮时，我希望发生的情况是，如果它是正确的，我应该为它分配一个(正确)类。但如果它是错误的，我会为其分配另一个(错误)类，但仍然显示哪个是正确的。

const handleClick = answer => {
  // How would I implement this logic?
 }

const App = ({ data }) => {

return (
  <div>
   {data.answers.map(answer => (
    <button onClick={() => handleClick(answer)}>{answer.text}</button>
   ))}
  </div>
 )
}

我尝试为单击的按钮创建一个状态变量。然后将其与通过 onclick 处理程序传递的参数进行比较。

Answer 1

您可以维护选择答案后设置的 selectedAnswer 状态。然后，如果当前答案的 . Correct 属性为 true 并且 in Correct 属性为 true，则您可以决定在映射时显示 Correct 类> class 如果为false，则该类存储在下面的classType中。由于您只想在选择答案后显示这些类，因此您可以有条件地添加类，如果:

• 您已选择一个答案(即 selectedAnnswer 有一个值)

并且

• 如果当前映射的答案正确或当前答案是您选择的答案，则添加类(class)

参见下面的示例:

const {useState} = React;
const App = ({ data }) => {
  const [selectedAnswer, setSelectedAnswer] = useState();
  const handleClick = answer => {
    setSelectedAnswer(answer);
  }

  return (
    <div>
     {data.answers.map(answer => {
        const classType = answer.correct ? "correct" : "incorrect";
        const showClass = selectedAnswer && (answer.correct || selectedAnswer === answer);
        return <button
          key={answer.text}
          className={showClass && classType}
          onClick={() => handleClick(answer)}>{answer.text}</button>
     })}
    </div>
  );
}


const obj = { "data": [ { "question": "What's 1+1", "answers": [ { "text": "3", "correct": false }, { "text": "2", "correct": true }, { "text": "1", "correct": false } ] } ] }
ReactDOM.createRoot(document.body).render(<App data={obj.data[0]} />);

.correct {background: lime;}
.incorrect {background: red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>