Forms

表单不同于其他 HTML 元素，因为它要响应用户的交互，显示不同的状态，所以在 React 里面会有点特殊，这正是需要单独一篇文章来讲述的原因。

表单元素有这么几种状态属性：

• value 对应的 <input> and <textarea> components.
• checked 对应的 checkbox or radio
• selected 对应的 option

表单元素可以包含以上任意一种状态属性，且支持 onChange 事件监听状态值的更改。

受控组件

一旦你设置了value属性这就表明此表单元素为受控组件，所谓的受控其意图表明，一个表单元素的更改，以及其UI的变更都需要受到React的控制。

如果你设置了value却未设置onChange事件，React会在控制台打印一条警告信息，虽然这不会报错。

如果你需要在希望输入的值可以反映到输入框中，你需要在onChange事件中改变value的值，比如：

constructor(props){
  super(props);
  this.state = {
    value: 'hello'
  }
}

handlerChange (e){
  this.setState({
    value: e.target.value
  });
}

render (){
  const { value } = this.state;
  reutrn (
    <input type="text" value={value} onChange={this.handleChange.bind(this)} />;
  );
}

非受控组件

相对于受控组件，非受控组件对于用户的要求和预期显然降低了许多，如果需要填写一个默认值，你需要使用defaultValue属性。

同时非受控组件依然可以注册onChange事件，来响应用户的操作。

Why？

推荐大家阅读完：Why Controlled Components 这一小节，思想个人认为还是很有必要的。