使用setState在onChange事件上构建对象数组

Question

无法使用动态属性构建表单。我可以稍后对表单进行规范化，但是尽量避免再做一个额外的函数，但因为我可以在onChange方法中做到这一点。

//欲望输出

formData: {
  name: 'alice',
  addresses: [{
    address_id: 1, address: 'UK'
  }, {
    address_id: 2, address: 'USA'
  }]
}

我被困了。

https://codesandbox.io/s/l528yw35x9

Answer 1

解决问题的一个简单方法是在表单数据中初始化地址数组，如

this.state = {
  formData: {addresses:[
    {
      address_id: 1, address: 'UK'
    }, {
      address_id: 2, address: 'USA'
    }
  ]}
}

现在在您的 onChange 方法中，您可以映射这样的地址元素

else{
  //{address_id: inputId, address: value}
  this.setState({
    formData: {
      ...this.state.formData, addresses:
        this.state.formData.addresses.map(e=>{
        return e.address_id == inputId ? 
          { address_id: inputId,address:value} : e
        }),

      }
  })
}

查看下面的完整示例 https://codesandbox.io/s/0omj21nrpv