こんにちは、this.stateのjsonのフィールドを更新することになっているテキストボックス/ FormControlがあります。 onChangeを行うより良い方法があるかどうか疑問に思っていましたか?
<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});
}
以下のように、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}})
}
関数が比較的単純な場合は、さらに単純化できます。
onChange = { (event) => { this.myValue = event.target.value } }
または、props
階層を渡す場合、たとえば.
onChange = { (event) => { this.props.onMyFunc(event.target.value) } }