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>
网友评论