表单

受控组件

在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）通常自己维护 state，并根据用户输入进行更新:

<!-- 用户可以在文本框里任意输入 -->
<input type="text" />

而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。React使state成为表单的唯一数据源, 渲染表单组件, 同时控制用户数据过程中表单发生的操作,这种输入元素就叫做受控组件:

// 由于在表单元素上设置了 value 属性，因此显示的值将始终为 this.state.value，这使得 React 的 state 成为唯一数据源
// 用户在表单里输入也不会影响表单里的值以及 this.state.value 的值
<input type="text" value={this.state.value} />

// 必须使用 setState 更新value才行
<input type="text" value={this.state.value} onChange={e => this.setState({ value: e.target.value })} />