setStateを使用してonChangeイベントでオブジェクトの配列を作成します。

Question

動的プロパティを使用してフォームを構築できませんでした。私は後でフォームを正規化することができますが、別の余分な関数を実行しないようにしようとしますが、私はonChangeメソッド内でそれを行うことができます。

//願望出力

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

私はstuckedです。

https://codesandbox.io/s/l528yw35x9

Answer 1

あなたの問題に簡単な解決策は、あなたがこのようなアドレスの要素をマッピングすることができ、あなたののonChange方法では今、この

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

のようなフォームデータのアドレスの配列を初期化することです

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