1、受控組件
- 在 React 中,可變狀態(mutable state)通常保存在組件的 state 屬性中,並且只能通過使用 setState()來更新。
- state:唯一數據源
- 渲染表單的 React 組件還控制著用戶輸入過程中表單發生的操作。被 React 以這種方式控制取值的表單輸入元素就叫做“受控組件”。
- 示例:
2、Textarea標籤
3、Select標籤
4、文件 input 標籤
- 因為它的 value 只讀,所以它是 React 中的一個非受控組件
5、處理多個輸入
- 當需要處理多個 input 元素時,我們可以給每個元素添加 name 屬性,並讓處理函數根據 event.target.name 的值選擇要執行的操作。
- 示例:
- 使用了 ES6 計算屬性名稱的語法更新給定輸入名稱對應的 state 值
6、受控輸入空值
- 在受控組件上指定 value 的 prop 會阻止用戶更改輸入。如果你指定了 value,但輸入仍可編輯,則可能是你意外地將value 設置為 undefined 或 null。
- 示例:
7、受控組件的替代品
- 使用非受控組件, 這是實現輸入表單的另一種方式。
8、成熟的解決方案
- 包含驗證、追蹤訪問字段以及處理表單提交的完整解決方案,使用 Formik 是不錯的選擇
關聯文章:
閱讀更多 ITCAN 的文章