reactjs - 处理 FormControl React 的变化

Question

嘿，所以我有一个文本框/FormControl，它应该更新 this.state 中 json 中的字段。我想知道是否有更好的方法来做 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});
  }

Answer 1

优化handleChange方法如下。（将“用户名”替换为您喜欢的字段名...）

<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}})
  }

Answer 2

如果您的功能相对简单，您可以进一步简化，

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

或者，如果您要向上传递props层次结构，例如

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