09 收集表單輸入資料

2022-09-17 23:39:30 字數 866 閱讀 7559

需求: 自定義包含表單的元件

1. 輸入使用者名稱密碼後, 點選登陸提示輸入資訊

2. 不提交表單

第一步:①初始化靜態元件,並渲染元件標籤,

②使用者名稱的方式使用非受控元件的方式收集表單資料。

③另外需要實現阻止表單提交的預設行為

第二步:採用非受控元件的方式,收集密碼輸入框中的資料,需要將輸入的值儲存在元件的狀態中,並通過 onchange () 更新狀態,把狀態傳給元件標籤顯示

原生:失去焦點時才會觸發

react中,不使用原生,一輸入就會觸發這個事件

包含表單的元件分類

受控元件:表單項輸入資料能自動收集成狀態

非受控元件:需要時才手動讀取表單輸入框中的資料

這裡收集使用者名稱輸入框中的資料的方式就屬於非受控元件

收集密碼輸入框中的資料既屬於受控元件又屬於非受控元件的方式,因為既是通過傳入狀態獲取資料又通過event.target 讀取了使用者的輸入值。

Flex表單自動填充與表單資料自動收集

如題,以下 展示如何講介面的表單域的值自動歸集到指定物件,以及如何用指定物件自動填充表單域,思路很簡單,但用起來挺方便的,結構不算好,但挺穩定的,所以也懶得去重構了。簡單的說下原理 1 收集表單資料,通過指定容器物件,對容器進行遞迴遍歷,當發現是表單域時,判斷物件是否有表單網域名稱稱相同的屬性,如果...

09 表單元素 上

表單元素,表單元素用於獲取使用者的輸入資料。在 html5 的表單中,提供了各種可供使用者輸入的表單控制項。元素名稱 說明form表示 html 表單 input表示用來收集使用者輸入資料的控制項 textarea表示可以輸入多行文字的控制項 select表示用來提供一組固定的選項 option表示...

Ionic 表單輸入

ionic封裝了一組指令用於表單輸入,包括ion checkbox 核取方塊 ion radio 單選框 ion toggle 開關 ionic的複選按鈕與html的複選按鈕並無太多差異,除了樣式美觀以外,它的優點主要在於能夠用ng model進行繫結,可以用ng checked方便地控制其是否選中...