5.表单组件

在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来渲染。