2.6 實(shí)戰(zhàn)案例：受控與非受控Input組件

表單處理是項(xiàng)目中比較常見的功能，表單操作看似比較簡(jiǎn)單，其實(shí)大有學(xué)問。本節(jié)以Input組件為例，簡(jiǎn)單介紹狀態(tài)管理、表單數(shù)據(jù)存儲(chǔ)及事件處理之間的關(guān)聯(lián)設(shè)計(jì)。

開始之前，我們先思考以下兩種場(chǎng)景：

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

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

輸給后端。

場(chǎng)景一為什么需要記錄輸入框的值呢？因?yàn)橛衅渌胤絿L試修改Input框的值，還不如頁(yè)面中有表單的一鍵清空操作；場(chǎng)景二是相對(duì)于場(chǎng)景一較為簡(jiǎn)單的表單操作，事先我們知道Input框中的值不會(huì)在其他地方引起更改，所以我們無(wú)須存儲(chǔ)Input框中的值。場(chǎng)景一實(shí)現(xiàn)的Input組件是受控表單，場(chǎng)景二實(shí)現(xiàn)的是非受控表單。下面來(lái)看代碼示例。

1.受控Input組件

上例是比較經(jīng)典的受控表單處理問題，重點(diǎn)知識(shí)通過代碼注釋標(biāo)注。主要思路是：當(dāng)組件初始化時(shí)，設(shè)置Input框的初始值為''。在Input框中鍵入數(shù)據(jù)后，失去焦點(diǎn)，則通過事件對(duì)象獲取值，并將該數(shù)據(jù)設(shè)置到狀態(tài)中。當(dāng)提交事件被觸發(fā)時(shí)，從狀態(tài)中獲取Input框的值并傳輸給后臺(tái)，完成表單提交操作。

2.非受控Input組件

上例是比較經(jīng)典的非受控表單處理問題，重點(diǎn)知識(shí)通過代碼注釋標(biāo)注。主要思路是：當(dāng)組件初始化時(shí)，創(chuàng)建用于引用Input組件實(shí)例的對(duì)象，該對(duì)象可以使用Input組件內(nèi)部的方法或獲取Input內(nèi)部的值（Value）。當(dāng)提交事件被觸發(fā)時(shí)，通過inpRef獲取Input組件實(shí)例中的值并傳輸給后臺(tái)，完成表單提交操作。