React筆記——核心概念:9.表單

1、受控組件

  • 在 React 中,可變狀態(mutable state)通常保存在組件的 state 屬性中,並且只能通過使用 setState()來更新。
  • state:唯一數據源
  • 渲染表單的 React 組件還控制著用戶輸入過程中表單發生的操作。被 React 以這種方式控制取值的表單輸入元素就叫做“受控組件”。
  • 示例:
React筆記——核心概念:9.表單

React筆記——核心概念:9.表單

2、Textarea標籤

  • 在 HTML 中, <textarea> 元素通過其子元素定義其文本/<textarea>
  • React筆記——核心概念:9.表單

  • 在 React 中,<textarea> 使用 value 屬性代替/<textarea>
  • 示例:
  • React筆記——核心概念:9.表單

    3、Select標籤

  • 在 HTML 中,<select> 創建下拉列表標籤/<select>
  • React筆記——核心概念:9.表單

  • React 在根 select 標籤上使用 value 屬性
  • 單選示例:
  • React筆記——核心概念:9.表單

    React筆記——核心概念:9.表單

  • 多選示例:
  • React筆記——核心概念:9.表單

    React筆記——核心概念:9.表單

    React筆記——核心概念:9.表單

    4、文件 input 標籤

    • 因為它的 value 只讀,所以它是 React 中的一個非受控組件
    React筆記——核心概念:9.表單

    5、處理多個輸入

    • 當需要處理多個 input 元素時,我們可以給每個元素添加 name 屬性,並讓處理函數根據 event.target.name 的值選擇要執行的操作。
    • 示例:
    React筆記——核心概念:9.表單

    React筆記——核心概念:9.表單

    React筆記——核心概念:9.表單

    • 使用了 ES6 計算屬性名稱的語法更新給定輸入名稱對應的 state 值
    React筆記——核心概念:9.表單

    6、受控輸入空值

    • 在受控組件上指定 value 的 prop 會阻止用戶更改輸入。如果你指定了 value,但輸入仍可編輯,則可能是你意外地將value 設置為 undefined 或 null。
    • 示例:
    React筆記——核心概念:9.表單

    7、受控組件的替代品

    • 使用非受控組件, 這是實現輸入表單的另一種方式。

    8、成熟的解決方案

    • 包含驗證、追蹤訪問字段以及處理表單提交的完整解決方案,使用 Formik 是不錯的選擇



    關聯文章:


    分享到:


    相關文章: