表单

表单元素有这么几种属于状态的属性：

• checked，对应类型为 checkbox 和 radio 的 <input> 所有
• selected，对应 <option> 所有

在 HTML 中 <textarea> 的值可以由子节点（文本）赋值，但是在 React 中，要用
value 来设置。

表单元素包含以上任意一种状态属性都支持 onChange 事件监听状态值的更改。

针对这些状态属性不同的处理策略，表单元素在 React 里面有两种表现形式。

对于设置了上面提到的对应“状态属性“值的表单元素就是受控表单组件，比如：

一个受控的表单组件，它所有状态属性更改涉及 UI 的变更都由 React
来控制（状态属性绑定 UI）。比如上面代码里的
输入框，用户输入内容，用户输入的内容不会显示（输入框总是显示状态属性 value 的值 hello），这有点颠覆我们的认知了，所以说这是受控组件，不是原来默认的表单元素了。

使用这种模式非常容易实现类似对用户输入的验证，或者对用户交互做额外的处理，比如截断最多输入140个字符：

和受控组件相对，如果表单元素没有设置自己的“状态属性”，或者属性值设置为
null，这时候就是非受控组件。

它的表现就符合普通的表单元素，正常响应用户的操作。

同样，你也可以绑定 onChange 事件处理交互。

如果你想要给“状态属性”设置默认值，就要用 React 提供的特殊属性
defaultValue，对于 checked 会有 defaultChecked，<option>
也是使用 defaultValue。

引入受控组件不是说它有什么好处，而是因为 React 的 UI
渲染机制，对于表单元素不得不引入这一特殊的处理方式。

回到 React 里的 <input> 输入框，当用户输入内容的时候，输入框的 value property
会改变，但是 value attribute 依然会是 HTML 上指定的值（attribute 要用
setAttribute 去更改）。

React 组件必须呈现这个组件的状态视图，这个视图 HTML 是由 render 生成，所以对于

在任意时刻，这个视图总是返回一个显示 hello 的输入框。

在 HTML 中 <select> 标签指定选中项都是通过对应 <option> 的 selected
属性来做的，但是在 React 修改成统一使用 value。

所以没有一个 selected 的状态属性。

你可以通过传递一个数组指定多个选中项：