在React組件中，表單組件與其他的組件時(shí)不一樣的。

表單組件支持幾個(gè)受用戶交互影響的屬性：

• value。用于 <input>、<textarea> 組件。
• checked。用于類型為 checkbox 或者 radio 的 <input> 組件。
• selected。用于 <option> 組件。

表單組件可以通過(guò)onChange回調(diào)函數(shù)來(lái)監(jiān)聽(tīng)組件變化。當(dāng)用戶做出以下交互時(shí)，onChange 執(zhí)行并通過(guò)瀏覽器做出響應(yīng)：

• <input> 或 <textarea> 的 value 發(fā)生變化時(shí)。
• <input> 的 checked 狀態(tài)改變時(shí)。
• <option> 的 selected 狀態(tài)改變時(shí)。

受控組件與非受控組件

接下來(lái)我們來(lái)聊一聊受控組件與非受控組件。受控組件的值由props或state傳入，用戶在元素上交互或輸入內(nèi)容會(huì)引起應(yīng)用state的改變。在state改變之后重新渲染組件，我們才能在頁(yè)面中看到元素中值的變化，假如組件沒(méi)有綁定事件處理函數(shù)改變state，用戶的輸入是不會(huì)起到任何效果的，這也就是“受控”的含義所在。

而非受控組件則類似于傳統(tǒng)的DOM表單控件，用戶輸入不會(huì)直接引起應(yīng)用state的變化，我們也不會(huì)直接為非受控組件傳入值。想要獲取非受控組件，我們需要使用一個(gè)特殊的ref屬性，同樣也可以使用defaultValue屬性來(lái)為其指定一次性的默認(rèn)值。

而在表單組件中，我們一般都需要來(lái)響應(yīng)用戶的輸入，會(huì)有表單組件的出發(fā)和數(shù)據(jù)的處理。因此，我們?cè)诒韱谓M件中一般都是使用受控組件，這樣可以保證表單的數(shù)據(jù)在組件的state管理之下，而不是各自獨(dú)立保有各自的數(shù)據(jù)。

受控組件

接下來(lái)，我們先來(lái)延時(shí)以下如何定義一個(gè)受控組件：

render: function() {
    return <input type="text" value="Hello，world!" />;
  }

一個(gè)受控的input有一個(gè)value的prop。在這個(gè)input中，用戶的輸入并不會(huì)對(duì)其產(chǎn)生影響，因?yàn)镽eact已經(jīng)有了聲明value值了。當(dāng)我們需要對(duì)其進(jìn)行改變的時(shí)候我們就需要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"/>;
  }

上面的代碼將渲染出一個(gè)空值的輸入框，用戶輸入將立即反應(yīng)到元素上。和受控元素一樣，使用 onChange 事件可以監(jiān)聽(tīng)值的變化。

不受控組件維持它自己的內(nèi)部狀態(tài)。而受控組件不維持它自己的內(nèi)部狀態(tài)，它基于prop來(lái)渲染。