处理 FormControl React 的变化答案

【问题标题】：Handle Change of FormControl React处理 FormControl React 的变化
【发布时间】：2016-11-25 11:58:48
【问题描述】：

嘿，所以我有一个文本框/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});
  }

【问题讨论】：

您希望改进事件处理程序的哪些方面？看起来还不错。不过，您可能要考虑的一件事是不要改变状态。你可以做类似this.setState({form: {...this.state.form, [change]: event.target.value}}) 的事情。如果您出于性能原因在某些时候实施shouldComponentUpdate，这将是必要的。
类似的东西！谢谢
我在第一个 .在...
你的编译配置文件是什么样的（对于 webpack 或其他），... 传播语法仍然是 stage-0 我认为这可能是它正在消亡的原因。

标签： reactjs onchange form-control

【解决方案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}})
  }

【讨论】：

【解决方案2】：

如果你的函数比较简单，可以进一步简化，

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

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

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

【讨论】：