react 表单受控组件

一、受控组件

1. 受控组件： 在React中，表单元素(input select textarea等) 被React以setState的方式驱动视图变化的元素称为受控函数。每个受控组件都维护自己的state 当输入的内容发生变化是，对应的state也会随之更新
2. 对于受控组件来说，输入的值始终由React的state驱动
3. 受控组件是针对表单来说的，需要给表单中的元素设置value 和 onChange 事件
4. 一般来说 value={this.state.value},这使得React的state成为唯一的数据源，因为每次按键更新都会执行state,就造成了显示的值会随着用户的输入随之更新

二、受控组件的用法

1.表单元素-----input 事件绑定在input上

2.表单元素------textarea 多行文本框，事件绑定在textarea元素上（方法与input相同）

3.表单元素------select-option 下拉列表框 ，事件绑定在select上

4.表单元素----单选按钮 事件绑定在 input 上（方法和input一样）

【注意】

单选按钮 需要使得每个input的name值保持一致，才能是单选按钮。

每个按钮都需要绑定事件，才可以是受控组件

defaultChecked 是默认选中的状态，需要将这个value值设置为初始值。如果后期需要初始化这个状态，需要使用checked 作为前端的默认选中。defaultChecked只是一个状态，并不会在页面上显示

5.表单元素—多选框 事件绑定在 input 上（方法和input一样）

【注意：】在声明事件的时候，与其他的方法不一样。

三、相关案例

使用lay-ui 进行受控组件的案例时，关于下拉列表和多选框，需要使用layui 自己的方法进行控制