受控组件
1、每当表单的状态发生变化时,都会被写入到组件的state中
2、在受控组件中,组件渲染出的状态与它的value或checked prop相对应
3、react受控组件更新state的流程
<1> 通过在初始state中设置表单的默认值
<2> 每当表单的值发生变化时,调用onChange事件处理器
<3> 事件处理器通过合成对象e拿到改变后的状态,并更新应用的state
<4> SetState触发视图的重新渲染,完成表单组件值的更新
示例如下:
受控组件-input
页面展示
4、使用受控组件需要为每一个组件绑定一个change事件,并且定义一个事件处理器来同步表单值和组件的状态,某些情况可以使用一个事件处理器来处理多个表单域
示例
页面展示
5、在受控组件上指定 value 的 prop 可以防止用户更改输入。(如果指定了 value,但输入仍可编辑,则可能是意外地将value 设置为 undefined 或 null)
非受控组件
1、如果一个表单组件没有value prop就可以称为非受控组件
2、非受控组件是一种反模式,它的值不受组件自身的state或props控制
3、通常需要为其添加ref prop来访问渲染后的底层DOM元素
示例