从 json 动态生成无线电组

Question

我正在构建一个选票应用程序，我想根据对象中的候选人列表动态生成一个无线电组。对象看起来像这样。

{
  "districtAttorney": [{
      "name": "Candidate1",
      "politics": "Dem-District 21",
      "img": "./Candidates/uncleruckus.jpg"
    },
    {
      "name": "Candidate2",
      "politics": "Dem-District 21",
      "img": "./Candidates/uncleruckus.jpg"
    }
  ]
}

我想生成一个如下所示的广播组

<div onChange={this.onChangeValue}>
            <input type="radio" value="Candidate1" name="gender" /> Male
            <input type="radio" value="Candidate2" name="gender" /> Female
            <input type="radio" value="Candidate3" name="gender" /> Other
</div>

我该怎么做？提前致谢。

Answer 1

我建议这样：

const obj = result.obj //or whatever your object name is
return (
<div onChange={this.onChangeValue}>
    {obj.districtAttorney.map((cand, ind) => (
       <label>
         <input type="radio" value={cand.name} name="gender" />
         <span>{cand.name}</span>
       </lable>
    }
</div>

在地图函数中，您可以使用来自 json 对象的所有数据

从 json 动态生成无线电组

Dynamically generate radio group from json

html

javascript

css

radio-group

reactjs