如何在 reactjs 的地图函数中处理多个单选按钮？

Question

我正在尝试在点击提交按钮时发送来自多个单选按钮组的选定单选按钮 ID 列表。

**我的问题：**单选按钮不同步，一次选中所有单选按钮。

需要：我需要将问答选项显示为单选按钮，并且需要将选择的答案id发送到后端

我的输出：

我的代码：

import React, { useState, useEffect } from "react";
import Progress_bar from "../Constant/Progress_bar";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faFilePdf,
  faArrowAltCircleLeft,
  faArrowAltCircleRight,
  faMagnifyingGlass,
  faDownload,
} from "@fortawesome/free-solid-svg-icons";
import axios from "axios";

function QuestionPage() {
  const [count, setCount] = useState(2);
  const [nextq, setnextq] = useState(0);

  const [question, setQuestion] = useState([]);
  useEffect(async () => {
    const result = await axios(
      "http://192.168.29.14:8000/api/controlquestion/"
    );

    setQuestion(result.data);
  }, []);
  console.log("auestion", question);
  return (
    <div>
      <div style={{ flexDirection: "row", display: "flex" }}>
        <h1 style={{ width: "60%" }}>Soc 2 Type I</h1>
        <text style={{ width: "8%", marginTop: "10px" }}></text>
        <text style={{ width: "15%", marginTop: "10px" }}></text>
        <h5 style={{ marginTop: "10px" }}></h5>
      </div>
      {question.map((item, index) => {
            return (
              <div>
                <h1 style={{color:'#000080',marginTop:50}}>{item.control_name}</h1>
                <div style={{marginTop:20,background:'#8080',borderRadius:15,}}>

                {item.question.map((c, i) => {
                  return (
                    <div style={{margin:30,}}>
                      <h3 style={{marginTop:30}}>{c.question_code} ?</h3>
                      {c.options.map((op, ii) => (
                        <div style={{display:'flex',flexDirection:'row'}}><input style={{width:'20px'}} type='radio'></input>
                        <a style={{marginTop:30}}>{op.option}</a>
                        </div>
                      ))}
                    </div>
                  );
                })}
                </div>
              </div>
            );
          })}
    </div>
     );
}
export default QuestionPage;

Api 回复：

> [
>     {
>         "control_id": 3,
>         "control_name": "Policies for information security",
>         "question": [
>             {
>                 "question_id": 12,
>                 "question_code": "is_policy_states_manage_security",
>                 "option_type_id": 4,
>                 "options": [
>                     {
>                         "option": "yes"
>                     },
>                     {
>                         "option": "No"
>                     }
>                 ]
>             },
>             {
>                 "question_id": 16,
>                 "question_code": "is_management_review_take_place",
>                 "option_type_id": 4,
>                 "options": [
>                     {
>                         "option": "Yes"
>                     },
>                     {
>                         "option": "No"
>                     }
>                 ]
>             },
>             {
>                 "question_id": 15,
>                 "question_code": "is_security_policy_reviwed",
>                 "option_type_id": 4,
>                 "options": [
>                     {
>                         "option": "Yes"
>                     },
>                     {
>                         "option": "No"
>                     }
>                 ]
>             } ]

Answer 1

您可以像这样为输入收音机设置名称：

<input style={{width:'20px'}} type='radio' name='is-policy'></input>

下一个广播组：

<input style={{width:'20px'}} type='radio' name='is-management'></input>

注意：广播组必须具有相同的名称（name 属性的值）才能被视为一个组。创建单选组后，选择该组中的任何单选按钮会自动取消选择同一组中任何其他选定的单选按钮。只要每个组都有自己的名称，您就可以在一个页面上拥有任意多个单选组。 source

如何在 reactjs 的地图函数中处理多个单选按钮？

How to handle multiple radio button in map function in reactjs?

reactjs

react-native

react-hooks