官术网_书友最值得收藏!

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組件實例中的值并傳輸給后臺,完成表單提交操作。

主站蜘蛛池模板: 库车县| 灵山县| 中方县| 化州市| 肥乡县| 襄樊市| 武定县| 称多县| 曲沃县| 县级市| 高台县| 安塞县| 阿拉善盟| 上饶市| 盐津县| 楚雄市| 北碚区| 恩平市| 蕲春县| 新田县| 沈丘县| 邮箱| 安宁市| 大冶市| 齐齐哈尔市| 平度市| 新营市| 屯昌县| 白水县| 灌云县| 鲁山县| 内乡县| 高唐县| 夏津县| 海安县| 安国市| 固原市| 阳原县| 牙克石市| 武义县| 寿阳县|