如何在 React 中创建单题测验？

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