时间戳

首页 > 解决方案 > 使用地图的反应js中的单选按钮

reactjs - 使用地图的反应js中的单选按钮

问题描述

我正在创建 json 数据格式如下所示的测验应用程序


    const data = [
        {
          id: 1,
          question_title: "Question1",
          Question_answer: [
            {
              answer_option: "option1",
              is_correct: false,
            },
            {
              answer_option: "option2",
              is_correct: false,
            },
            {
              answer_option: "option3",
              is_correct: false,
            },
            {
              answer_option: "option4",
              is_correct: true,
            },
          ],
        }
    ];

我已经赋值currentState为0，我的代码是这样的


    <h3>{data[currentQuestion].question_title}</h3>
    {data[currentQuestion].Question_answer.map((answer, key) => (
                <>
                  <label>
                    <input
                      type="radio"
                      value={answer.answer_option}
                      name={answer.answer_option}
                      onClick={() => checkAnswer(answer)}
                    />
                    &nbsp;
                    {answer.answer_option}
                  </label>
                </>
              ))}

我想一次只选择一个选项，但在这里它允许我一次选择多个选项，我怎样才能一次只选择一个单选按钮？

标签： reactjs

解决方案

解析器必须有一种方法可以知道它们input radios是链接的。name是财产。确保为所有输入提供相同的名称，以便一次只能选择一个。

从文档：

通过为组中的每个单选按钮赋予相同的名称来定义单选组。建立单选组后，选择该组中的任何单选按钮会自动取消选择同一组中的任何当前选择的单选按钮。

这是一个使用“问题”作为名称的示例，您可以选择任何逻辑值。

                 <label>
                    <input
                      type="radio"
                      value={answer.answer_option}
                      name="question"
                      onClick={() => checkAnswer(answer)}
                    />
                    &nbsp;
                    {answer.answer_option}
                  </label>

推荐阅读