表單組件

諸如 <input>、<textarea>、<option> 這樣的表單組件不同于其他組件，因?yàn)樗麄兛梢酝ㄟ^用戶交互發(fā)生變化。這些組件提供的界面使響應(yīng)用戶交互的表單數(shù)據(jù)處理更加容易。

交互屬性

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

• value，用于 <input>、<textarea> 組件。

• checked，用于類型為 checkbox 或者 radio 的 <input> 組件。

• selected，用于 <option> 組件。

在 HTML 中，<textarea> 的值通過子節(jié)點(diǎn)設(shè)置；在 React 中則應(yīng)該使用 value 代替。

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

• <input> 或 <textarea> 的 value 發(fā)生變化時(shí)。

• <input> 的 checked 狀態(tài)改變時(shí)。

• <option> 的 selected 狀態(tài)改變時(shí)。

和所有 DOM 事件一樣，所有的 HTML 原生組件都支持 onChange 屬性，而且可以用來監(jiān)聽冒泡的 change 事件。

受限組件

設(shè)置了 value 的 <input> 是一個(gè)受限組件。 對(duì)于受限的 <input>，渲染出來的 HTML 元素始終保持 value 屬性的值。例如：

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

上面的代碼將渲染出一個(gè)值為 Hello! 的 input 元素。用戶在渲染出來的元素里輸入任何值都不起作用，因?yàn)?React 已經(jīng)賦值為 Hello!。如果想響應(yīng)更新用戶輸入的值，就得使用 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 屬性。這樣實(shí)現(xiàn)響應(yīng)或者驗(yàn)證用戶輸入的界面就很容易了。例如：

  handleChange: function(event) {
    this.setState({value: event.target.value.substr(0, 140)});
  }

上面的代碼接受用戶輸入，并截取前 140 個(gè)字符。

不受限組件

沒有設(shè)置 value(或者設(shè)為 null) 的 <input> 組件是一個(gè)不受限組件。對(duì)于不受限的 <input> 組件，渲染出來的元素直接反應(yīng)用戶輸入。例如：

  render: function() {    return <input type="text" />;
  }

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

如果想給組件設(shè)置一個(gè)非空的初始值，可以使用 defaultValue 屬性。例如：

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

上面的代碼渲染出來的元素和受限組件一樣有一個(gè)初始值，但這個(gè)值用戶可以改變并會(huì)反應(yīng)到界面上。

同樣地， 類型為 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>
      );
    }

高級(jí)主題

為什么使用受限組件？

在 React 中使用諸如 <input> 的表單組件時(shí)，遇到了一個(gè)在傳統(tǒng) HTML 中沒有的挑戰(zhàn)。

比如下面的代碼：

  <input type="text" name="title" value="Untitled" />

在 HTML 中將渲染初始值為 Untitled 的輸入框。用戶改變輸入框的值時(shí)，節(jié)點(diǎn)的 value 屬性（property）將隨之變化，但是node.getAttribute('value') 還是會(huì)返回初始設(shè)置的值 Untitled.

與 HTML 不同，React 組件必須在任何時(shí)間點(diǎn)描繪視圖的狀態(tài)，而不僅僅是在初始化時(shí)。比如在 React 中：

  render: function() {    return <input type="text" name="title" value="Untitled" />;
  }

該方法在任何時(shí)間點(diǎn)渲染組件以后，輸入框的值就應(yīng)該始終為 Untitled。

為什么 <textarea> 使用 value 屬性？

在 HTML 中， <textarea> 的值通常使用子節(jié)點(diǎn)設(shè)置：

  <!-- 反例：在 React 中不要這樣使用！ -->
  <textarea name="description">This is the description.</textarea>

對(duì) HTML 而言，讓開發(fā)者設(shè)置多行的值很容易。但是，React 是 JavaScript，沒有字符限制，可以使用 \n 實(shí)現(xiàn)換行。簡言之，React 已經(jīng)有value、defaultValue 屬性，</textarea> 組件的子節(jié)點(diǎn)扮演什么角色就有點(diǎn)模棱兩可了?；诖?， 設(shè)置 <textarea> 值時(shí)不應(yīng)該使用子節(jié)點(diǎn)：

  <textarea name="description" value="This is a description." />

如果*非要**使用子節(jié)點(diǎn)，效果和使用 defaultValue 一樣。

為什么 <select> 使用 value 屬性

HTML 中 <select> 通常使用 <option> 的 selected 屬性設(shè)置選中狀態(tài)；React 為了更方面的控制組件，采用以下方式代替：

  <select value="B">
    <option value="A">Apple</option>
    <option value="B">Banana</option>
    <option value="C">Cranberry</option>
  </select>

如果是不受限組件，則使用 defaultValue。

注意：

給 value 屬性傳遞一個(gè)數(shù)組，可以選中多個(gè)選項(xiàng)：<select multiple={true} value={['B', 'C']}>。