在React组件中，表单组件与其他的组件时不一样的。
表单组件支持几个受用户交互影响的属性：
- value。用于 <input>、<textarea> 组件。
- checked。用于类型为 checkbox 或者 radio 的 <input> 组件。
- selected。用于 <option> 组件。
表单组件可以通过onChange回调函数来监听组件变化。当用户做出以下交互时，onChange 执行并通过浏览器做出响应：
- <input> 或 <textarea> 的 value 发生变化时。
- <input> 的 checked 状态改变时。
- <option> 的 selected 状态改变时。
受控组件与非受控组件
接下来我们来聊一聊受控组件与非受控组件。受控组件的值由props或state传入，用户在元素上交互或输入内容会引起应用state的改变。在state改变之后重新渲染组件，我们才能在页面中看到元素中值的变化，假如组件没有绑定事件处理函数改变state，用户的输入是不会起到任何效果的，这也就是“受控”的含义所在。
而非受控组件则类似于传统的DOM表单控件，用户输入不会直接引起应用state的变化，我们也不会直接为非受控组件传入值。想要获取非受控组件，我们需要使用一个特殊的ref属性，同样也可以使用defaultValue属性来为其指定一次性的默认值。
而在表单组件中，我们一般都需要来响应用户的输入，会有表单组件的出发和数据的处理。因此，我们在表单组件中一般都是使用受控组件，这样可以保证表单的数据在组件的state管理之下，而不是各自独立保有各自的数据。
受控组件
接下来，我们先来延时以下如何定义一个受控组件：
render: function() {
return <input type="text" value="Hello，world!" />;
}
一个受控的input有一个value的prop。在这个input中，用户的输入并不会对其产生影响，因为React已经有了声明value值了。当我们需要对其进行改变的时候我们就需要onChange事件了。
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
return (
<input
type="text"
value={this.state.value}
onChange={this.handleChange}
/>
);
}
非受控组件
相反的不使用value值就是非受控组件：
render: function() {
return <input type="text"/>;
}
上面的代码将渲染出一个空值的输入框，用户输入将立即反应到元素上。和受控元素一样，使用 onChange 事件可以监听值的变化。
不受控组件维持它自己的内部状态。而受控组件不维持它自己的内部状态，它基于prop来渲染。
