反應單選按鈕更新狀態

Question

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

Answer 1

映射中的主要問題是您忘記返回任何值。 您可以添加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'/>

Answer 2

這就是在一個表單元素中定義兩組單選組按鈕的方式。

<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 值中給出答案。 我可以給出更詳細的答案 o 我如何保存這些值，但前提是您需要它。