諸如?`<input>`、`<textarea>`、`<option>`?這樣的表單組件不同于其他組件，因為他們可以通過用戶交互發生變化。這些組件提供的界面使響應用戶交互的表單數據處理更加容易。
關于?`<form>`?事件詳情請查看?[表單事件](http://reactjs.cn/react/docs/events.html#form-events)。
## 交互屬性
表單組件支持幾個受用戶交互影響的屬性：
* `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`?事件。
## 受限組件
設置了?`value`?的?`<input>`?是一個_受限_組件。 對于受限的?`<input>`，渲染出來的 HTML 元素始終保持?`value`?屬性的值。例如：
~~~
render: function() {
return <input type="text" value="Hello!" />;
}
~~~
上面的代碼將渲染出一個值為?`Hello!`?的 input 元素。用戶在渲染出來的元素里輸入任何值都不起作用，因為 React 已經賦值為?`Hello!`。如果想響應更新用戶輸入的值，就得使用`onChange`?事件：
~~~
getInitialState: function() {
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.handleChange} />;
}
~~~
上面的代碼中，React 將用戶輸入的值更新到?`<input>`?組件的?`value`?屬性。這樣實現響應或者驗證用戶輸入的界面就很容易了。例如：
~~~
handleChange: function(event) {
this.setState({value: event.target.value.substr(0, 140)});
}
~~~
上面的代碼接受用戶輸入，并截取前 140 個字符。
## 不受限組件
沒有設置?`value`(或者設為?`null`) 的?`<input>`?組件是一個_不受限_組件。對于不受限的`<input>`?組件，渲染出來的元素直接反應用戶輸入。例如：
~~~
render: function() {
return <input type="text" />;
}
~~~
上面的代碼將渲染出一個空值的輸入框，用戶輸入將立即反應到元素上。和受限元素一樣，使用?`onChange`?事件可以監聽值的變化。
如果想給組件設置一個非空的初始值，可以使用?`defaultValue`?屬性。例如：
~~~
render: function() {
return <input type="text" defaultValue="Hello!" />;
}
~~~
上面的代碼渲染出來的元素和**受限組件**一樣有一個初始值，但這個值用戶可以改變并會反應到界面上。
同樣地， 類型為?`radio`、`checkbox`?的`<input>`?支持?`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">
<option value="A">Apple</option>
<option value="B">Banana</option>
<option value="C">Cranberry</option>
</select>
</div>
);
}
~~~
## 高級主題
### 為什么使用受限組件？
在 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`。
### 為什么?`<textarea>`?使用?`value`?屬性？
在 HTML 中，?`<textarea>`?的值通常使用子節點設置：
~~~
<!-- 反例：在 React 中不要這樣使用！ -->
<textarea name="description">This is the description.</textarea>
~~~
對 HTML 而言，讓開發者設置多行的值很容易。但是，React 是 JavaScript，沒有字符限制，可以使用?`\n`?實現換行。簡言之，React 已經有?`value`、`defaultValue`?屬性，`</textarea>`?組件的子節點扮演什么角色就有點模棱兩可了。基于此， 設置`<textarea>`?值時不應該使用子節點：
~~~
<textarea name="description" value="This is a description." />
~~~
如果_非要_*使用子節點，效果和使用?`defaultValue`?一樣。
### 為什么?`<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>
~~~
如果是不受限組件，則使用?`defaultValue`。
> 注意：
>
> 給?`value`?屬性傳遞一個數組，可以選中多個選項：`<select multiple={true} value={['B', 'C']}>`。
