web-dev-qa-db-ja.com

FormControlの変更を処理するReact

こんにちは、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});
  }
reactjsonchangeform-control
6
Patrick Duncan

以下のように、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}})
  }
11
Galeel Bhasha

関数が比較的単純な場合は、さらに単純化できます。

onChange = { (event) => { this.myValue = event.target.value } }

または、props階層を渡す場合、たとえば.

onChange = { (event) => { this.props.onMyFunc(event.target.value) } }
1
Pixel