react js中的单选按钮使用map

Question

我正在创建一个问答应用程序，其中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>
</>
))}

我想一次只选择一个选项，但这里允许我一次选择多个选项，我如何一次只选一个单选按钮？

Answer 1

必须有一种方法让解析器知道input radios是链接的。name是属性。确保所有输入都使用相同的名称，这样一次只能选择一个。

来自文档：

通过为组中的每个单选按钮指定相同的名称来定义单选组。一旦建立了一个单选组，选择该组中的任何单选按钮将自动取消选择同一组中当前选择的任意单选按钮。

这里有一个使用"；问题"；作为名称，您可以选择任何逻辑值。

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

Answer 2

您需要为每个输入提供一个name属性，因为这就是将它们分组在一起的原因。

确保你给出的名称不会重复，否则你会有多个无线电组控制同一个值。

欲了解更多信息，请点击此处

"通过给组中的每个单选按钮相同的名称来定义单选组。一旦建立了一个无线电组，选择该组中的任何一个无线电按钮自动取消选择同一组中的当前选择的任何无线电按钮"；

<input
type="radio"
name = {key}
value = { answer.answer_option }
name = { answer.answer_option }
onClick = {() => checkAnswer(answer)}
/>