如何在“反应”中创建一个单题小测验？

Question

如何实现正确和不正确答案的逻辑？我做了一个有多种选择的单题测验。我已经创建了一个Quiz组件。这是消息来源：

问答组件

export default function Quiz(props) {
  
  return (
    <div className="QuizContainer">
      <div className="quizHeader">
        <h1>Question</h1>
        <p className="PracticeDescription">
          Read the question and choose the most correct option.
        </p>
      </div>
      <hr/>

      <div className="PracticeQuestionContainer">
        <p>{props.question}</p>

        <div class="option-container">
          <input type="radio" name="select" id="option-1" className="input-radio" />
          <input type="radio" name="select" id="option-2" className="input-radio" />
          <input type="radio" name="select" id="option-3" className="input-radio" />
          <input type="radio" name="select" id="option-4" className="input-radio" />

          <label for="option-1" className="option option-1">
            <div className="dot"></div>
            <span>{props.option1}</span>
          </label>

          <label for="option-2" className="option option-2">
            <div className="dot"></div>
            <span>{props.option2}</span>
          </label>

          <label for="option-3" className="option option-3">
            <div className="dot"></div>
            <span>{props.option3}</span>
          </label>

          <label for="option-4" className="option option-4">
            <div className="dot"></div>
            <span>{props.option4}</span>
          </label>
        </div>
      </div>
    </div>
  );
}

我在页面上使用了这样的组件：

<Quiz
  question="1. Which one is not a JavaScript variable?"
  option1="var a=5"
  option2="let b=6"
  option3="const c=3"
  option4="int x=9"
/>

以下是它的外观：

​

​

如果用户选择正确的答案，它应该 colsole.log("Correct!") else console.log("Incorrect!")。我该怎么做？请救救我！

Answer 1

首先，您还需要向您的Quiz组件传递一个正确的答案，之后您需要查看事件处理，因此每当用户单击某个选项时，都会调用一个函数，该函数将单击的答案与正确的答案进行比较。

在这里阅读更多信息：https://reactjs.org/docs/handling-events.html