⑧ 表单 -- 受控组件 & 非受控组件

react 中，可变状态通常保存在组件的 state 属性中，并且只能通过 <code>setState()</code> 来更新。

渲染表单的 react 组件还控制着用户输入过程中表单发生的操作。

对于受控组件来说，输入的值始终由 <code>React</code> 的 <code>state</code> 驱动。

<code>this.state.value</code> 初始化于构造函数中，因此文本区域默认有初值

使用 <code>multiple={ true }</code> 支持 select 标签多选

当需要处理多个 input 元素时，我们可以给每个元素添加 name 属性，并让处理函数根据 <code>event.target.name</code> 的值选择要执行的操作

在受控组件上指定 value 的 <code>prop</code> 会阻止用户更改输入。如果你指定了 value，但输入仍可编辑，则可能是你意外地将 value 设置为 <code>undefined</code> 或 <code>null</code>。

指定了 value：输入最初被锁定，但在短时间延迟后变为可编辑

大多数情况下，推荐使用 受控组件 来处理表单数据

在受控组件中，表单数据交由 <code>react</code> 组件来处理

在非受控组件中，表单数据交由 <code>dom</code> 节点来处理

非受控组件不是为每个状态更新都编写数据处理函数，使用 <code>ref</code> 来从 dom 节点中获取表单数据

指定一个 <code>defaultValue</code> 属性

react 中，<code>&lt;input type="file" /&gt;</code> 始终是一个非受控组件，因为它的值只能由用户设置不能通过代码控制