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

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

主站蜘蛛池模板: 剑阁县| 恩平市| 泽库县| 永新县| 临泽县| 陆河县| 桐乡市| 濮阳市| 泊头市| 石屏县| 广州市| 武清区| 阜平县| 昂仁县| 巴南区| 淮北市| 民县| 文化| 汝城县| 高州市| 宾阳县| 光山县| 四子王旗| 富顺县| 泾川县| 德惠市| 大厂| 永吉县| 新安县| 湄潭县| 综艺| 禹城市| 钦州市| 巴马| 乌拉特后旗| 望都县| 沂水县| 新安县| 凤台县| 封开县| 苗栗县|