-1

我在 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'
           />
        })
     })}
   )
 }
4

2 回答 2

3

映射中的主要问题是您忘记返回任何值。您可以添加一个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'/>

于 2019-01-18T12:49:31.473 回答
0

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

<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 值中给出答案。我可以给出更详细的答案，说明我如何保存这些值，但前提是您需要它。

于 2019-01-18T12:48:18.520 回答