标签：select 文档 并且 ase 更新 保留 渲染 状态 val
HTML元素和 React里的其他DOM元素有些不同，因为它们会保留一些内部的状态。举个例子，这个普通的表单接受一个name值：
<form>
<label>
Name:
<input type="text" name="name" />
</label>
<input type="submit" value="Submit" />
</form>
这个表单具有默认的表单行为，当用户提交表单就会跳转到新页面。如果你想要在React里实现此行为，它自然而然就会实现。但是在大多数情况下，定义一个控制表单提交并且有能力控制用户输入的表单数据的js函数会更方便。实现这个的标准方法是一种叫“控制组件”的技术。
控制组件
在HTML里，<input>，<textarea>和<select>这类元素通常包含它们自己的状态并且会基于用户输入而更新状态。在React中，易变的状态通常会保存在组件的state属性里，并且只能使用setState()来更新。
我们可以联合两种状态通过设置React state为“单一数据源”。然后React组件会渲染表单也会控制随后用户的输入。这样子的表单元素输入的值被React控制的方法叫做“控制组件”。
举个例子，如果我们想要让上一个例子当提交的时候记录name值，我们可以把表单写成一个控制组件：
class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ‘‘}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { alert(‘A name was submitted: ‘ + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" value={this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value="Submit" /> </form> ); } }
只要value属性被设置在表单元素上，被显示的value值就永远会是this.state.value，使得React的state是单一数据源。当每次修改表单值的时候handleChange就会更新React的state，只要输入改变显示的值就会更新。
通过控制组件，每一个state的变化都会有一个联合的处理函数。这让它可以明确的修改或者确认用户输入。举个例子，如果我们想要强制name值都用大写字母来写，那么我们应该像这样写handleChange函数：
handleChange(event) { this.setState({value: event.target.value.toUpperCase()}); }
标签：select 文档 并且 ase 更新 保留 渲染 状态 val
原文地址：http://www.cnblogs.com/hahazexia/p/6415599.html
