1、像是<input>、<textarea>、<option>這樣的表單組件不同於其他組件，因爲他們可以通過用戶交互發生變化。這些組件提供的界面使響應用戶交互的表單數據處理更加容易。
2、交互屬性
表單組件支持幾個受用戶交互影響的屬性
value，用於<input>、<textarea>組件；checked，用於類型爲checkbox或者radio的<input>組件；selected，用於<option>組件。
在HTML中，<textarea>的值通過子節點設置，在React中則應該使用value代替。表單組件可以通過onChange會調函數來監聽組件變化。當用戶做出以下交互時，onChange執行並通過瀏覽器做出響應：
- <input> 或 <textarea> 的 value 發生變化時。
- <input> 的 checked 狀態改變時。
- <option> 的 selected 狀態改變時。
和所有的DOM事件一樣，所有的HTML原生組件都支持onChange屬性，而且可以用來監聽冒泡的change事件。
3、受限組件
設置了value的<input>是一個受限組件。對於受限的<input>,渲染出來的HTML元素始終保持value屬性的值。例如：
render：function(){
return <inptut type="text" value="hello"/>
}
上面的代碼將渲染出一個值爲 Hello! 的 input元素。用戶在渲染出來的元素裏輸入任何值都不起作用，因爲 React 已經賦值爲 Hello!。如果想響應更新用戶輸入的值，就得使用onChange 事件：
getInitialState:funtion(){
return {value:‘hello’}；
},
handleChange：function（event）{
this.setState({value:event.target.value});
},
render:function(){
var value= this.state.value;
return <input type="text" value={value} onChange={this.hanleChange} />
}
以上代碼中，React將用戶輸入的值更新到<input>組件的value屬性。這樣實現響應或者驗證用戶輸入的界面就很容易了。例如：
handleChange：function(event){
this.setState({value:event.target.value.substr(0,140)});
}
以上代碼接受用戶輸入，並截取前140個字符。
4、不受限組件
沒有設置value（或者設爲null）的<input>組件是一個不受限組件。對於不受限的<input>組件，渲染出來的元素直接反應用戶輸入。例如：
render：function（）{
return<Input type="text"/>
}
以上代碼將是一個沒有任何內容過的空的輸入框，用戶輸入將理解反映到元素上。和受限元素一樣，使用onChange事件可以監聽值的變化。
如果想給組件設置一個非空的初始值，可以使用defaultValue屬性。例如：
render：function（）{
return <input type="text" defaultValue="Hello" />;
}
以上代碼渲染出來的元素和受限組件一樣有一個初始化的值，但是這個值可以改變並反應到頁面上。
同樣的類型爲radio、checkbox、的<ingput>支持defaultChecked屬性，<select>支持defaultValue屬性。
render: function() {
return (
<div>
<input type="radio"name="opt" defaultChecked /> Option 1
<input type="radio"name="opt" /> Option 2
<select defaultValue="C">
<optionvalue="A">Apple</option>
<optionvalue="B">Banana</option>
<optionvalue="C">Cranberry</option>
</select>
</div>
);
}
5、使用受限組件的原因
在React中使用<input>的表單組建時，遇到傳統的HTML中沒有的阻礙，例如：<input type="text"name="title" value ="Untitled" />
在HTML 中將渲染初始值爲 Untitled 的輸入框。用戶改變輸入框的值時，節點的 value屬性（property）將隨之變化，但是 node.getAttribute('value') 還是會返回初始設置的值 Untitled.
與HTML 不同，React 組件必須在任何時間點描繪視圖的狀態，而不僅僅是在初始化時。比如在 React 中：
render: function() {
return <input type="text" name="title" value="Untitled" />;
}
該代碼在任何時候渲組件之後輸入框都是Untitled
6、爲什麼<textarea>使用value屬性？
在HTML中，<textarea>的值通常使用子節點設置：
//這樣是錯誤的，在React中textarea不可以在textarea標籤內寫入子節點
<textarea name=“description”>This is thedescription.</textarea>
對 HTML 而言，讓開發者設置多行的值很容易。但是，React 是JavaScript，沒有字符限制，可以使用 \n 實現換行。簡言之，React 已經有 value、defaultValue 屬性，</textarea> 組件的子節點扮演什麼角色就有點模棱兩可了。基於此，設置<textarea> 值時不應該使用子節點：
<textarea name="description" value="Thisis a description." />如果非要*使用子節點，效果和使用 defaultValue 一樣。
7、爲什麼<select>使用value屬性
HTML中<select> 通常使用<option>的selected屬性設置選中狀態；React爲了更好的控制組件，採用以下方式代替：
<select value="B">
<option value="A">Apple</option>
<option value="B">Banana</option>
<option value="C">Cranberry</option>
</select>
PS：給 value 屬性傳遞一個數組，可以選中多個選項：<select multiple={true}value={['B', 'C']}>。
