Question

我在React App中实现单选按钮组件时遇到问题。我有一个具有不同选项的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'
           />
        })
     })}
   )
 }

Answer 1

这是在一个表单元素中定义两组单选组按钮的方式。

<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>

要设置状态，只需在handlechange方法中编写即可。

handleChange=(event)=> {
    console.log(event.target.value);
    this.setState({
      selectedoptionId : event.target.value
    })
    tempobj["optionId"] = event.target.value
  };

关于此tempobj["optionId"] = event.target.value，由于您要反复添加表单组件，因此需要保存答案，以免丢失上一组答案。为此，我将选项保存在JSON对象本身中。使用OptionID作为键，并在相应的JSON值中进行回答。关于如何保存这些值，我可以给出更详细的答案，但前提是您需要。

Answer 2

映射中的主要问题是您忘记返回任何值。您可以添加return语句，也可以删除括号。

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

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

<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)
}

工作示例：

const data = {
    "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 React.Component {
    constructor(props) {
        super(props);
        this.state = {
            Pizza: '',
            Size: ''
        }
    }

    selectionChanged = type => ev => {
        this.setState({ [type]: ev.target.value })
        console.log('Selection of ' + type + ' changed to ' + ev.target.value)
    }

    render() {
        return (
            <div>
                {this.props.food.map(({ id, name, options }) =>
                    <div key={id}>
                        <h2>{name}</h2>
                        {options.map((opt) =>
                            <input
                                type='radio'
                                value={opt.name}
                                name={name}
                                key={opt.id}
                                onChange={this.selectionChanged(name)}
                            />
                        )}
                    </div>
                )}
            </div>
        )
    }
}

ReactDOM.render(<PizzaList food={data.food}/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.1/umd/react-dom.production.min.js"></script>
<div id='root'/>

反应单选按钮更新状态

2 个答案: