reactjsコンポーネントの状態で動的にプロパティを生成する

Question

私は非常に大きなフォームを持っています。ユーザーの入力データをすべてフォームの名前を付けた別の属性に保存したいと考えています。

名前、年齢、電子メールのフォームがあるとします。私はそのすべてを価値と呼ばれる状態で救いたい。だからフォームが一杯になると私はthis.state.value[name],this.state.value[age]とthis.state.value[email]を持っています。

しかし、これは機能しません。フォームの入力データを保存しようとするとエラーが発生します。ここで

は）（handleChangeためのコードです：

handleChange(e) { 
    //this.setState({value[e.target.name]: e.target.value}); //does not work 
    this.setState({[e.target.name]: e.target.value}); //works! 
} 

それでは、どのように私は状態属性の下のフォームからの値を保存することができますか？

ありがとうございます！

const value = Object.assign({}, this.state.value) 
value[e.target.name] = e.target.value 
this.setState({ value }) 

Answer 1

。あなたが試みているのは、状態valueの更新を実行することです。そのためには、immutability-helperのようなものをお勧めします。別の回答（1）に掲載されたコピーを作成するためのObject.assignの使用は、同じことを達成し、完全に合理的であるということ

this.setState({value: update(this.state.value, {[e.target.name]: {$set: e.target.value})})

注：お使いの更新は次のようになり、その場合には

この場合。しかし、不変性ヘルパーは、より複雑な更新を行うための便利なツールです。

Answer 2

value[e.target.name]有効なキーではありません：あなたはこのようにそれを行う場合、どのよう

Answer 3

最初に、この方法でvalueが定義されていないことを指摘したいと思いますが、エラーが発生した可能性があります。

通常、値は更新時に保存されます。

<input onChange={ e => this.setState({name: e.target.value}) />

フォームが送信されるときに、あなたは状態オブジェクトのすべての値へのアクセスを持っているでしょう。