⑧ 表單 -- 受控元件 & 非受控元件

react 中，可變狀态通常儲存在元件的 state 屬性中，并且隻能通過 <code>setState()</code> 來更新。

渲染表單的 react 元件還控制着使用者輸入過程中表單發生的操作。

對于受控元件來說，輸入的值始終由 <code>React</code> 的 <code>state</code> 驅動。

<code>this.state.value</code> 初始化于構造函數中，是以文本區域預設有初值

使用 <code>multiple={ true }</code> 支援 select 标簽多選

當需要處理多個 input 元素時，我們可以給每個元素添加 name 屬性，并讓處理函數根據 <code>event.target.name</code> 的值選擇要執行的操作

在受控元件上指定 value 的 <code>prop</code> 會阻止使用者更改輸入。如果你指定了 value，但輸入仍可編輯，則可能是你意外地将 value 設定為 <code>undefined</code> 或 <code>null</code>。

指定了 value：輸入最初被鎖定，但在短時間延遲後變為可編輯

大多數情況下，推薦使用 受控元件 來處理表單資料

在受控元件中，表單資料交由 <code>react</code> 元件來處理

在非受控元件中，表單資料交由 <code>dom</code> 節點來處理

非受控元件不是為每個狀态更新都編寫資料處理函數，使用 <code>ref</code> 來從 dom 節點中擷取表單資料

指定一個 <code>defaultValue</code> 屬性

react 中，<code>&lt;input type="file" /&gt;</code> 始終是一個非受控元件，因為它的值隻能由使用者設定不能通過代碼控制