2.6 实战案例：受控与非受控Input组件

表单处理是项目中比较常见的功能，表单操作看似比较简单，其实大有学问。本节以Input组件为例，简单介绍状态管理、表单数据存储及事件处理之间的关联设计。

开始之前，我们先思考以下两种场景：

（1）Input框中的值在更改后期望被记录，然后在提交时拿出记录的值并传输给后端。

（2）操作过程中不额外存储Input框的值，而是在提交时直接获取Input框的值并传

输给后端。

场景一为什么需要记录输入框的值呢？因为有其他地方尝试修改Input框的值，还不如页面中有表单的一键清空操作；场景二是相对于场景一较为简单的表单操作，事先我们知道Input框中的值不会在其他地方引起更改，所以我们无须存储Input框中的值。场景一实现的Input组件是受控表单，场景二实现的是非受控表单。下面来看代码示例。

1.受控Input组件

上例是比较经典的受控表单处理问题，重点知识通过代码注释标注。主要思路是：当组件初始化时，设置Input框的初始值为''。在Input框中键入数据后，失去焦点，则通过事件对象获取值，并将该数据设置到状态中。当提交事件被触发时，从状态中获取Input框的值并传输给后台，完成表单提交操作。

2.非受控Input组件

上例是比较经典的非受控表单处理问题，重点知识通过代码注释标注。主要思路是：当组件初始化时，创建用于引用Input组件实例的对象，该对象可以使用Input组件内部的方法或获取Input内部的值（Value）。当提交事件被触发时，通过inpRef获取Input组件实例中的值并传输给后台，完成表单提交操作。