Javascript 反应单选按钮更新状态

我在React应用程序中实现单选按钮组件时遇到问题。 我有一个json文件，有不同的选项，如下所示：

[ 
"food": [
   {
    "id": 1,
    "name": "Pizza",
    "options": [
        {
            "id": 11,
            "name": "Margherita",
        },
        {
            "id": 12,
            "name": "Pepperoni",
        },
        {
            "id": 13,
            "name": "Prosciutto",
        },
        {
            "id": 14,
            "name": "Prataiolo",
        }
    ]
  },
  {
    "id": 2,
    "name": "Size",
    "options": [
        {
            "id": 21,
            "name": "S",
        },
        {
            "id": 22,
            "name": "M",
        },
        {
            "id": 23,
            "name": "L",
        },
        {
            "id": 24,
            "name": "XL",
        },
    ]
 }

我想制作一个单选按钮，供用户选择他们想要的比萨饼，并将其置于组件状态

如何使用两组单选按钮使其工作

class PizzaList extends Component{
  constructor(props){
  super(props);
    this.state = {
        pizza: '',
        size: ''
     }

  render(){

  return(
    {this.props.food.map(option => {
      <h2 key={option.id}>{option.name}</h2>
        {option.options.map(value => {
          <input 
            type='radio'
            value='value.id'
           />
        })
     })}
   )
 }

class PizzaList扩展组件{
建造师（道具）{
超级（道具）；
此.state={
比萨饼：，
大小：“”
}
render（）{
返回(
{this.props.food.map（选项=>{
{option.name}
{option.options.map（值=>{
})
})}
)
}

这就是如何在一个表单元素中定义两组单选组按钮的方法

<form>
<fieldset id="group1">
<input type="radio" value="value1" name="group1" onChange={this.handleChangea}>
<input type="radio" value="value2" name="group1" onChange={this.handleChangea}>
</fieldset>

<fieldset id="group2">
<input type="radio" value="value1" name="group2" onChange={this.handleChangeb}>
<input type="radio" value="value2" name="group2" onChange={this.handleChangeb}>
<input type="radio" value="value3" name="group2" onChange={this.handleChangeb}>
</fieldset>
</form>

---

关于这个

tempobj[“optionId”]=event.target.value

，因为您要迭代添加表单组件，所以需要保存答案，这样我们就不会丢失以前的答案集。为此，我将选项保存在JSON对象本身中。使用OptionID作为键，并将答案保存在各自的JSON值中。我可以给出如何保存这些值的更详细答案映射中的主要问题是忘记返回任何值。您可以添加

return

语句，也可以删除括号

您还需要设置每个按钮的名称，以确保用户一次只能选择一个按钮

现在，要处理更改，您需要将每个输入的值设置为字段名，并将其绑定到一个将发送其所属名称的更改函数：

<input
    type='radio'
    value={this.state[name]}
    name={name}
    key={opt.id}
    onChange={this.selectionChanged(name)}
/>

工作示例：

const数据={
“食物”：[
{
“id”：1，
“名称”：“比萨饼”，
“选择”：[
{
“id”：11，
“姓名”：“玛格丽塔”，
},
{
“id”：12，
“名字”：“意大利香肠”，
},
{
“id”：13，
“名称”：“火腿”，
},
{
“id”：14，
“名称”：“Prataiolo”，
}
]
},
{
“id”：2，
“名称”：“大小”，
“选择”：[
{
“id”：21，
“名称”：“S”，
},
{
“id”：22，
“名称”：“M”，
},
{
“id”：23，
“名称”：“L”，
},
{
“id”：24，
“名称”：“XL”，
},
]
}
]
}
类PizzaList扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
比萨饼：，
大小：“”
}
}
selectionChanged=type=>ev=>{
this.setState（{[type]：ev.target.value}）
console.log（“+type+”的选择更改为“+ev.target.value”）
}
render（）{
返回(
{this.props.food.map（{id，name，options}）=>
{name}
{options.map（（opt）=>
)}
)}
)
}
}
ReactDOM.render（，document.getElementById（'root'））

---

问题的主要问题是如何将按钮映射到给定的JSON，而不是对按钮进行硬编码。我认为OP知道如何使用

input

节点。另外，您如何将按钮与这两个组区分开来？

<input
    type='radio'
    value={this.state[name]}
    name={name}
    key={opt.id}
    onChange={this.selectionChanged(name)}
/>

selectionChanged = type => ev => {
    this.setState({ [type]: ev.target.value })
    console.log('Selection of ' + type ' changed to ' + ev.target.value)
}