React-受控组件

一、认识受控组件
在React中，HTML表单的处理方式和普通的DOM元素不太一样：表单元素通常会保存在一些内部的state。

比如下面的HTML表单元素：

1、这个处理方式是DOM默认处理HTML表单的行为，在用户点击提交时会提交到某个服务器中，并且刷新页面
2、在React中，并没有禁止这个行为，它依然是有效的。
3、但是通常情况下会使用js函数方便的处理表单提交，同时还可以访问用户填写的表单数据。
4、实现这种效果的标准方式是使用“受控组件”。

二、受控组件的基本演练
1、在HTML中，表单元素（如、和）之类的表单元素通常自己维护state，并根据用户输入进行更新。
2、而在React中，可变状态通常保存在组件的state属性中没并且只能通过使用setState()来更新
1、我们将两者结合起来，使React的state变成“唯一数据源”
2、渲染表单的React组件还控制着用户输入过程中表单发生的组件。
3、被React以这种方式控制取值的表单输入元素就叫做“受控组件”
3、由于在表单元素上设置了value元素，因此显示的值将始终为this.state.value，这使得React的state成为唯一的数据源。
4、由于handleUsernameChange在每次按键时都会执行并更新React的state，因此显示的值将随着用户的输入而更新。