如何在React单题测验Quiz组件中实现答题正误判断逻辑

实现步骤 #

1. 新增correctOption props 传入正确选项的序号（1-4对应option1到option4）
2. 使用useState存储用户选中的选项序号
3. 修复原代码中class="option-container"的错误，React中要使用className属性，for属性要改为htmlFor
4. 给单选框添加onChange事件绑定，更新选中状态
5. 新增提交按钮，点击时判断答案是否正确，输出对应日志

改造后完整组件代码 #

import { useState } from 'react';

export default function Quiz(props) {
  // 存储用户选中的选项序号
  const [selectedOption, setSelectedOption] = useState(null);

  // 答案校验逻辑
  const checkAnswer = () => {
    if (selectedOption === props.correctOption) {
      console.log("Correct!");
    } else {
      console.log("Incorrect!");
    }
  };

  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 className="option-container">
          <input 
            type="radio" 
            name="select" 
            id="option-1" 
            className="input-radio" 
            value={1}
            onChange={() => setSelectedOption(1)}
          />
          <input 
            type="radio" 
            name="select" 
            id="option-2" 
            className="input-radio" 
            value={2}
            onChange={() => setSelectedOption(2)}
          />
          <input 
            type="radio" 
            name="select" 
            id="option-3" 
            className="input-radio" 
            value={3}
            onChange={() => setSelectedOption(3)}
          />
          <input 
            type="radio" 
            name="select" 
            id="option-4" 
            className="input-radio" 
            value={4}
            onChange={() => setSelectedOption(4)}
          />

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

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

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

          <label htmlFor="option-4" className="option option-4">
            <div className="dot"></div>
            <span>{props.option4}</span>
          </label>
        </div>
        {/* 提交按钮，可根据需求调整样式 */}
        <button onClick={checkAnswer} style={{marginTop: '20px', padding: '6px 12px'}}>
          提交答案
        </button>
      </div>
    </div>
  );
}

组件使用示例 #

示例题的正确答案是第4个，所以传入correctOption={4}：

<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"
  correctOption={4}
/>

如果需要用户选中选项后立刻校验不需要提交按钮，把checkAnswer逻辑放到对应单选框的onChange事件中即可。

内容的提问来源于stack exchange，提问作者Mehdi Saqlen