2.6 實戰案例：受控與非受控Input組件

表單處理是項目中比較常見的功能，表單操作看似比較簡單，其實大有學問。本節以Input組件為例，簡單介紹狀態管理、表單數據存儲及事件處理之間的關聯設計。

開始之前，我們先思考以下兩種場景：

（1）Input框中的值在更改后期望被記錄，然后在提交時拿出記錄的值并傳輸給后端。

（2）操作過程中不額外存儲Input框的值，而是在提交時直接獲取Input框的值并傳

輸給后端。

場景一為什么需要記錄輸入框的值呢？因為有其他地方嘗試修改Input框的值，還不如頁面中有表單的一鍵清空操作；場景二是相對于場景一較為簡單的表單操作，事先我們知道Input框中的值不會在其他地方引起更改，所以我們無須存儲Input框中的值。場景一實現的Input組件是受控表單，場景二實現的是非受控表單。下面來看代碼示例。

1.受控Input組件

上例是比較經典的受控表單處理問題，重點知識通過代碼注釋標注。主要思路是：當組件初始化時，設置Input框的初始值為''。在Input框中鍵入數據后，失去焦點，則通過事件對象獲取值，并將該數據設置到狀態中。當提交事件被觸發時，從狀態中獲取Input框的值并傳輸給后臺，完成表單提交操作。

2.非受控Input組件

上例是比較經典的非受控表單處理問題，重點知識通過代碼注釋標注。主要思路是：當組件初始化時，創建用于引用Input組件實例的對象，該對象可以使用Input組件內部的方法或獲取Input內部的值（Value）。當提交事件被觸發時，通過inpRef獲取Input組件實例中的值并傳輸給后臺，完成表單提交操作。