受控组件:表单元素(input.textarea,selection)的值由React组件控制。
比如说:常见的场景:留言板上,使用react组件,通过操作setState()方法来修改input输入框的值,最后由state对象来保存变化后的值。
react官方也是推荐使用受控组件。总结下react组件更新state的整个流程:
可以通过初始化设置state的默认值;
每当表单值发生变化时,就要调用onchange方法处理事件
一定不能忘记在初始化的时候,把this指向事件调用对象。
通过this.setState设置数据, 事件处理拿到event改变后的状态,触发视图重新渲染
具体代码如下:

页面渲染:(虽然有点丑,没有去添加样式)

react组件是单向数据流,由代码可见,数据是在state中初始化出来的,通过props传值,使用handleChange()
方法,把新的表单数据又传回state.