1、受控組件

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

2、Textarea標簽

在 HTML 中, 元素通過其子元素定義其文本在 React 中， 使用 value 屬性代替示例：

3、Select標簽

在 HTML 中， 創建下拉列表標簽React 在根 select 標簽上使用 value 屬性單選示例：多選示例：

4、文件 input 標簽

• 因為它的 value 只讀，所以它是 React 中的一個非受控組件

5、處理多個輸入

• 當需要處理多個 input 元素時，我們可以給每個元素添加 name 屬性，并讓處理函數根據 event.target.name 的值選擇要執行的操作。
• 示例：

• 使用了 ES6 計算屬性名稱的語法更新給定輸入名稱對應的 state 值

6、受控輸入空值

• 在受控組件上指定 value 的 prop 會阻止用戶更改輸入。如果你指定了 value，但輸入仍可編輯，則可能是你意外地將value 設置為 undefined 或 null。
• 示例：

7、受控組件的替代品

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

8、成熟的解決方案

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

---

關聯文章：

• React筆記——核心概念：1.Hello World

• React筆記——核心概念：2.JSX簡介

• React筆記——核心概念：3.元素渲染

• React筆記——核心概念：4.組件&Props

• React筆記——核心概念：5.State&生命周期

• React筆記——核心概念：6.事件處理

• React筆記——核心概念：7.條件渲染

• React筆記——核心概念：8.列表&Key

總結

以上是生活随笔為你收集整理的使用react实现select_React笔记——核心概念：9.表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。