Reactjs 如何在react组件的map方法中添加复选框或单选按钮？

如何在map方法中添加复选框或单选按钮。我已经创建了问答应用程序。我需要为答案添加复选框或单选按钮。卡片组件的下面是打印问题和答案的地方。我如何才能在其中添加单选按钮，以便用户可以检查答案

 import React, { useState, useEffect } from "react";
    import { Fragment } from "react";
    import "./Survey.css";
    import CreateSurvey from "../modals/CreateSurvey";
    import Card from "../card/Card";
    
    const Survey = () => {
      const [modal, setModal] = useState(false);
      const [surveyList, setSurveyList] = useState([]);
    
      useEffect(() => {
        let arr = localStorage.getItem("surveyList");
        if (arr) {
          let obj = JSON.parse(arr);
          setSurveyList(obj);
        }
      }, []);
    
      const deleteSurvey = (index) => {
        let tempList = surveyList;
        tempList.splice(index, 1);
        localStorage.setItem("surveyList", JSON.stringify(tempList));
        setSurveyList(tempList);
        window.location.reload();
      };
    
      const toggle = () => {
        setModal(!modal);
      };
    
      const updateListArray = (obj, index) => {
        let tempList = surveyList;
        tempList[index] = obj;
        localStorage.setItem("surveyList", JSON.stringify(tempList));
        setSurveyList(tempList);
        window.location.reload();
      };
    
      const saveSurvey = (surveyObj) => {
        let tempList = surveyList;
        tempList.push(surveyObj);
        localStorage.setItem("surveyList", JSON.stringify(tempList));
        setSurveyList(surveyList);
        setModal(false);
      };
      return (
        <Fragment>
          <div className="header text-center">
            <h5>Survey</h5>
            <button className="btn btn-primary" onClick={() => setModal(true)}>
              Create Survey
            </button>
          </div>
          <div className="survey-container">
            {surveyList &&
              surveyList.map((obj, index) => (
                <Card
                  surveyObj={obj}
                  index={index}
                  deleteSurvey={deleteSurvey}
                  updateListArray={updateListArray}
                />
                 
               
              ))}
          </div>
          <CreateSurvey toggle={toggle} modal={modal} save={saveSurvey} />
        </Fragment>
      );
    };
    
    export default Survey;

import React，{useState，useffect}来自“React”；
从“react”导入{Fragment}；
导入“/Survey.css”；
从“./modals/CreateSurvey”导入CreateSurvey；
从“./Card/Card”导入卡片；
const Survey=（）=>{
const[modal，setModal]=useState（false）；
常量[surveyList，setSurveyList]=useState（[]）；
useffect（（）=>{
设arr=localStorage.getItem（“surveyList”）；
如果（arr）{
让obj=JSON.parse（arr）；
设置曲面列表（obj）；
}
}, []);
常量删除调查=（索引）=>{
让圣堂武士=调查者；
模板拼接（索引，1）；
setItem（“surveyList”，JSON.stringify（templast））；
setSurveyList（圣殿骑士）；
window.location.reload（）；
};
常量切换=（）=>{
setModal（！modal）；
};
常量updateListaray=（对象，索引）=>{
让圣堂武士=调查者；
圣殿骑士[index]=obj；
setItem（“surveyList”，JSON.stringify（templast））；
setSurveyList（圣殿骑士）；
window.location.reload（）；
};
const saveSurvey=（surveyObj）=>{
让圣堂武士=调查者；
圣殿骑士推（surveyObj）；
setItem（“surveyList”，JSON.stringify（templast））；
设置surveyList（surveyList）；
setModal（假）；
};
返回(
调查
setModal（真）}>
创建调查
{调查列表&&
surveyList.map（（对象，索引）=>(
))}
);
};
出口违约调查；

//Card.js

import React, { useState } from "react";
import "./Card.css";

const Card = ({ surveyObj, deleteSurvey, index }) => {
  const [modal, setModal] = useState(false);

  const toggle = () => {
    setModal(!modal);
  };

  const deleteHandler = () => {
    deleteSurvey(index);
  };

  return (
    <div>
      <div className="card-wrapper mr-5">
        <div className="card-top"></div>
        <div className="survey-holder">
          <span className="card-header">{surveyObj.name}</span>
          <p className="answer"> {surveyObj.answerOne}</p>
          <div className="icons">
            <i className="far fa-edit edit"></i>
            <i className="fas fa-trash-alt delete" onClick={deleteHandler}></i>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Card;

import React，{useState}来自“React”；
导入“/Card.css”；
常量卡=（{surveyObj，deleteSurvey，index}）=>{
const[modal，setModal]=useState（false）；
常量切换=（）=>{
setModal（！modal）；
};
常量deleteHandler=（）=>{
调查（索引）；
};
返回(
{surveyObj.name}
{surveyObj.answerOne}
);
};
导出默认卡；

//Createsurvey.js

import React, { useState } from "react";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
import { Fragment } from "react";

const CreateSurvey = ({ modal, toggle, save }) => {
  const [question, setQuestion] = useState("");
  const [answerOne, setAnswerOne] = useState("");
  const [answerTwo, setAnswerTwo] = useState("");
  const [answerThree, setAnswerThree] = useState("");
  const [answerFour, setAnswerFour] = useState("");

  const changeHandler = (e) => {
    const { name, value } = e.target;

    if (name === "question") {
      setQuestion(value);
    } else {
      setAnswerOne(value);
    }
  };

  const saveHandler = (e) => {
    e.preventDefault();
    let surveyObj = {};
    surveyObj["name"] = question;
    surveyObj["answerOne"] = answerOne;
    surveyObj["answerTwo"] = answerTwo;
    surveyObj["answerThree"] = answerThree;
    surveyObj["answerFour"] = answerFour;
    save(surveyObj);
  };
  return (
    <Fragment>
      <Modal isOpen={modal} toggle={toggle}>
        <ModalHeader toggle={toggle}>Create a Survey Question</ModalHeader>
        <ModalBody>
          <form>
            <div>
              <div className="form-group">
                <label>Survey Questions</label>
                <input
                  type="text"
                  className="form-control"
                  value={question}
                  name="question"
                  onChange={changeHandler}
                />
              </div>
            </div>
            <div className="mt-2">
              <label>Survey Answers</label>
              <div className="form-group">
                <label>Answer 1</label>
                <input
                  type="text"
                  className="form-control mt-2 mb-2"
                  value={answerOne}
                  name="answerOne"
                  onChange={changeHandler}
                />
              </div>
              <div className="form-group">
                <label>Answer 2</label>
                <input
                  type="text"
                  className="form-control mt-2 mb-2"
                  value={answerTwo}
                  name="answerTwo"
                  onChange={changeHandler}
                />
              </div>
              <div className="form-group">
                <label>Answer 3</label>
                <input
                  type="text"
                  className="form-control mt-2 mb-2"
                  value={answerThree}
                  name="answerThree"
                  onChange={changeHandler}
                />
              </div>
              <div className="form-group">
                <label>Answer 4</label>
                <input
                  type="text"
                  className="form-control mt-2 mb-2"
                  value={answerFour}
                  name="answerFour"
                  onChange={changeHandler}
                />
              </div>
            </div>
          </form>
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={saveHandler}>
            Create
          </Button>
          <Button color="secondary" onClick={toggle}>
            Cancel
          </Button>
        </ModalFooter>
      </Modal>
    </Fragment>
  );
};

export default CreateSurvey;

import React，{useState}来自“React”；
从“reactstrap”导入{Button，Modal，ModalHeader，ModalBody，ModalFooter}；
从“react”导入{Fragment}；
const CreateSurvey=（{model，toggle，save}）=>{
const[question，setQuestion]=useState（“”）；
const[answerOne，setAnswerOne]=useState（“”）；
const[answerTwo，setAnswerTwo]=useState（“”）；
const[answerThree，setAnswerThree]=useState（“”）；
const[answerFour，setAnswerFour]=useState（“”）；
常量changeHandler=（e）=>{
常量{name，value}=e.target；
如果（姓名=“问题”）{
设置问题（值）；
}否则{
setAnswerOne（值）；
}
};
const saveHandler=（e）=>{
e、 预防默认值（）；
让surveyObj={}；
surveyObj[“name”]=问题；
surveyObj[“answerOne”]=answerOne；
surveyObj[“answerTwo”]=answerTwo；
surveyObj[“answerThree”]=answerThree；
surveyObj[“answerFour”]=answerFour；
save（surveyObj）；
};
返回(
创建一个调查问题
调查问题
调查答案
答复1
答复2
答复3
答复4
创造
取消
);
};
导出默认调查；

据我所知，您希望在map方法中添加多个组件。您只需按照以下方式进行操作：

{surveyList &&
              surveyList.map((obj, index) => (
                <>
                <Card
                  surveyObj={obj}
                  index={index}
                  deleteSurvey={deleteSurvey}
                  updateListArray={updateListArray}
                />
                <input type="checkbox" name="userchoice" />
                </> 
              ))}

{surveyList&&
surveyList.map（（对象，索引）=>(
))}

我已经添加了支持js的文件。我只想要答案的复选框，而不是问题的复选框。我想你想知道如何在地图中渲染多个组件。扫描您的代码看起来就像，您正在使用卡片组件来显示每个答案。您可以在卡组件中添加单选按钮，它应该可以工作。不需要在地图中处理它。