Question

我正在按如下所示的大小数组添加多个输入

imagecreatefromstring()

以这种形式

[
 {
   _id: "1",
   size: "Size 1",
   price: 2
 },
 {
   _id: "2",
   size: "Size 2",
   price: 4
 }
]

为进一步说明，我正在为披萨餐厅创建销售点，我将添加来自不同视图的多种尺寸的披萨。

在这一本书中，我想根据不同的大小定义配料的价格。

我正在尝试找到解决方案，以便在表单提交中获得以下提到的结果。

<Form onSubmit={this.addToppingAction}>
  <div>
    <label className="col-form-label" htmlFor="topping">
      Topping
    </label>
    <input type="text" name="topping" value={topping} placeholder="Topping" />
  </div>
  <h5>Sizes</h5>
  {sizes.map(size => (
    <div>
      <label htmlFor="price">{size.size} price</label>
      <input
        type="number"
        step="0.1"
        id={size._id}
        name="price"
        value={size.price}
        placeholder="Price"
      />
    </div>
  ))}

  <button type="submit">Add Toppings</button>
</Form>;

Answer 1

您可以 Click here获取解决方案。

这是主要部分。

class App extends React.Component{

  constructor(props){
    super(props);
    this.state = {
      sizes:[{price:"a",name:"b"},{price:"c",name:"f"}]
    }
    // you can set state from api or ... you know how you are setting.
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange (e){
    let newState = Object.assign([],this.state.sizes);
    newState[e.target.name.split("_")[0]][e.target.name.split("_")[1]] = e.target.value;
    this.setState({sizes:newState})
  }

  handleSubmit(){
    console.log(this.state)
  }

  render(){
    const {sizes} = {...this.state}
    return (
      <div className="App">
        {sizes.map( (data,index)=>
          <div>
            {Object.keys(data).map( d => <input name={`${index}_${d}`} value={data[d]} onChange={this.handleChange} />)}
          </div>
        )}
        <button onClick={()=>this.handleSubmit()} >test</button>
      </div>
    );

  }
}

但是..
在react docs中不建议使用嵌套状态。由于更新的难度加大，因此请避免像在此处那样嵌套状态。

{
stateA:{
  stateB:{
    react:"angry"
  }
 }
}

获取数组中动态生成的表单数据

1 个答案: