表单
在HTML表单中，表单元素与React中的其他DOM元素有所不同，因为HTML的表单元素一旦创建就会保留一些内部状态。
如下边的表单，接受一个唯一的name。
<form>
<label>
Name: <input type="text" name="name" />
<label>
<input type="submit" value="submit" />
</form>
当点击提交表单的时候，HTML默认会是表达跳转到一个新页面。在React中也是一样的。但是在大多数情况下，我们都希望在提交的时候对用户输入的数据进行获取并处理，一般会定义一个函数来实现。这种实现方法的标准技术我们称之为“受控组件”。
受控组件
我们知道在HTML的表单标签如<input>、<textarea>、<select>等这些标签会维持自身的状态，也就是你输入或者选择了某些值之后，标签自己会把这些值记录下来。但是在React中，我们知道构成UI展示的最小单位是元素，对元素进行抽象封装后，可以定义组件，这些可变的值我们是放在组件的状态属性中的，也就是state中的，并且只能通过setState()方法进行更新(除了在构造函数中进行初始化时)。
受控组件，我们最简单的理解，就是UI展示的组件或者元素，其内容或者其状态是受React来控制的，通过React内部组件的状态state来控制。
看下边的代码，input的内容是手NameForm组件控制的，通过state内部value的值来控制：
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.toUpperCase()});
}
handleSubmit(event) {
alert('submit a name:' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type="text" value={this.state.value} onChange={this.handleChange} name="name"/>
<input type="submit" value="submit" />
</form>
);
}
}
ReactDOM.render(
<NameForm />, document.getElementById('root')
);
同理，textarea和select也是一样。
textarea本来是通过子节点来定义内容的，React中也是直接使用value属性来控制。select是通过子元素option的selected来控制的，现在也可以将直接使用value作为select的属性来控制。
