大綱

• 不受控元件
• 受控元件
• 表單事件
• 標籤

前言
對任何與使用者互動的網站來講，表單這個部分是很重要也很常見的。在傳統的應用程式上，在單個頁面的應用程式中 (single page application) 中，很難把表單做的很完善，因為來自四面八方的使用者的、會不斷變更中的狀態會使之顯得相當雜亂。管理這一個狀態是既複雜且又常常包含了各式各樣的錯誤。透過 React 的方便及強大可以幫助我們管理應用程式中的狀態，這也是很適用於表單。

透過有學習過 JavaScript 及前面幾篇關於 React 所得到的基礎知識，我們會了解可預期性與可測試性是 React 元件的核心要點。對於同樣的屬性和狀態，任何一個 React 元件都應該每次都能渲染出同樣的結果，想當然的表單也不例外。

React 中有兩種表單類型的元件：受控 (Controlled) 與不受控制 (Uncontrolled)。接下來會介紹這兩者的差別以及在什麼樣的情況下，我們應該使用哪一種。

不受控元件
在大部分的應用程式中比較重要的表單中，我們是不會考慮使用不受控的元件。然而，它們能夠幫助我們理解受控元件。不受控元件是在 React 中建立元件的典型錯誤。

在 HTML 中，表單和 React 元件元件的運作模式是很不一樣的。當 HTML 的 <input/> 收到一個值時，該 <input/> 可以更改本身的值。這是因為表單元件的值不受 React 元件的控制，因此便被不受控元件的名稱。

在 Rwact 中，這種行爲包括設定 <input/> 的 deafultValue。另外，為了在 React 中可以設定 <input/> 的預設值，我們可以使用 deafultValue 的屬性：

var MyForm = React.createClass({
  render: function() {
    return <input type='MAN WITH A MISSION' />;
  }
});

以上這個範例便是一個很典型的不受控元件。其值並非由父元件所給予，而是允許 <input/> 控制自己的值。在我們可以存取這個值之前，不受控元件並不具多大的作用。哪...為了要可以存取這個值，我們就會需要增加一個 ref 至 <input/>，然後存取 DOMNode 的值。

ref 是一個特別的非 DOM 屬性，時常被用來在 this 執行環境中識別一個元件。一個元件中的所有 ref 都會被添加到 this.ref 以便我們存取。另外一點，不知道算不算是優點的優點，對於不要求任何驗證或輸入控制的基本表單，不受控元件是很方便。