表单

受控组件#

在 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 })} />