文章目录
受控组件
所谓受控组件就是每当表单的状态发生变化时,都会被写入到组件的state中,这种组件就被称为受控组件。
在受控组件中,组件渲染出的状态与它的value
或checked prop
相对应。React通过这种方式消除了组件的局部状态。
更新state的流程
- 可以通过在初始
state
中设置表单的默认值 - 每当表单的值发生变化,调用
onChange
事件处理器 - 事件处理器通过合成事件对象拿到改变后的状态,并更新应用的
state
setState
触发视图的重新渲染,完成表单组件值得更新
每次表单值发生变化时,都会执行上述几步。这样统一了组件内部状态,使表单的状态更可靠。这也意味着,在执行最后一步setState
之前,我们可以对值进行修饰。
例子
class Controlled extends Component{
constructor(props){
super(props);
this.state = {
inputState: ''
}
this.changeHandle = this