美文网首页
@芥末的糖-----受控组件和非受控组件

@芥末的糖-----受控组件和非受控组件

作者: 芥末的糖 | 来源:发表于2018-12-03 21:35 被阅读0次
  constructor () {
    super()
    this.state = {
      inputValue: 'test',
    }
  }
  handleInput (e) {
    this.setState({
      inputValue: e.target.value,
    })
  }

1.受控组件

 <textarea 
       value={this.state.inputValue}
       onChange={ this.handleInput.bind(this) }
       //  ref={input => this.ta = input}
       name="" cols="30" rows="10"
       id="content"
 ></textarea>

react中是单向数据流的,我们不能直接修改state的属性

1.可以通过初始state中设置表单的默认值;
2.每当表单的值发生变化时,调用onChange事件处理器;
3.事件处理器通过合成事件对象e拿到改变后的状态,并更新应用的state.
4.setState触发视图的重新渲染,完成表单组件值得更新

2.非受控组件

 <textarea 
       //value={this.state.inputValue}
       //onChange={ this.handleInput.bind(this) }
       ref={input => this.ta = input}
       name="" cols="30" rows="10"
       id="content"
 ></textarea>

相关文章

网友评论

      本文标题:@芥末的糖-----受控组件和非受控组件

      本文链接:https://www.haomeiwen.com/subject/kxtfqqtx.html