如何在React弹窗模块中渲染题目选项为单选按钮

基础展示版本 #

直接修改你的QuestionModel组件，遍历每个问题的answerOptions数组生成单选按钮：

import questions from "./Data";
const QuestionModel = () => {
  return (
    <div className="modal-body">
      <div className="app">
        {questions.map((question, questionIndex) => {
          return (
            <div key={questionIndex} className="question-container">
              <h3>{question.questionText}</h3>
              <div className="answer-options">
                {question.answerOptions.map((option, optionIndex) => {
                  return (
                    <div key={optionIndex} className="option-item">
                      <input
                        type="radio"
                        id={`q${questionIndex}-opt${optionIndex}`}
                        name={`question-${questionIndex}`}
                        value={option.answerText}
                      />
                      <label htmlFor={`q${questionIndex}-opt${optionIndex}`}>
                        {option.answerText}
                      </label>
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

关键说明 #

• 给每个问题容器添加key：确保React正确识别列表项，这里用问题索引（如果你的数据里有问题唯一ID，用ID更稳妥）
• 单选按钮分组：通过name={question-${questionIndex}}让同一题的单选按钮属于同一组，保证同一时间只能选中一个选项
• 标签关联：id和label的htmlFor属性绑定，点击选项文本也能选中对应的单选按钮，提升交互体验

带选中状态跟踪的进阶版本 #

如果需要记录用户选中的答案，可以添加React状态来管理：

import { useState } from "react";
import questions from "./Data";
const QuestionModel = () => {
  // 用对象存储每个问题的选中答案，键为问题索引，值为选中的选项文本
  const [selectedAnswers, setSelectedAnswers] = useState({});

  const handleOptionChange = (questionIndex, answerText) => {
    setSelectedAnswers(prevState => ({
      ...prevState,
      [questionIndex]: answerText
    }));
  };

  return (
    <div className="modal-body">
      <div className="app">
        {questions.map((question, questionIndex) => {
          return (
            <div key={questionIndex} className="question-container">
              <h3>{question.questionText}</h3>
              <div className="answer-options">
                {question.answerOptions.map((option, optionIndex) => {
                  // 判断当前选项是否被选中
                  const isChecked = selectedAnswers[questionIndex] === option.answerText;
                  return (
                    <div key={optionIndex} className="option-item">
                      <input
                        type="radio"
                        id={`q${questionIndex}-opt${optionIndex}`}
                        name={`question-${questionIndex}`}
                        value={option.answerText}
                        checked={isChecked}
                        onChange={() => handleOptionChange(questionIndex, option.answerText)}
                      />
                      <label htmlFor={`q${questionIndex}-opt${optionIndex}`}>
                        {option.answerText}
                      </label>
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

这个版本会跟踪用户的选中状态，你可以后续通过selectedAnswers对象获取所有问题的选中答案。

内容的提问来源于stack exchange，提问作者lekshmi priya