FormControlのハンドルの変更を処理する

Question

ちょっと、私はthis.stateのjsonのフィールドを更新するはずのテキストボックス/ FormControlを持っています。変更を行うより良い方法があるかどうか疑問に思っていましたか？

<FormControl 
    type='text' 
    placeholder='enter' 
    defaultValue={this.state.form.name} 
    onChange={this.handleChange.bind(this, 'name')} 
/> 
</FormGroup> 

`

handleChange(change, event) { 
    var toChange = this.state.form; 
    toChange[change] = event.target.value; 
    this.setState({form: toChange}); 
    } 

Answer 1

として以下handleChange方法を最適化します。 （ 'username'を好きなフィールド名に置き換えてください）

<FormControl 
    type='text' 
    name='username' 
    placeholder='enter' 
    defaultValue={this.state.form.username} 
    onChange={this.handleChange.bind(this)} 
/> 
</FormGroup> 

handleChange(event) { 
    let fieldName = event.target.name; 
    let fleldVal = event.target.value; 
    this.setState({form: {...this.state.form, [fieldName]: fleldVal}}) 
    }