1、受控組件

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

2、Textarea標(biāo)簽

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

3、Select標(biāo)簽

在 HTML 中， 創(chuàng)建下拉列表標(biāo)簽React 在根 select 標(biāo)簽上使用 value 屬性單選示例：多選示例：

4、文件 input 標(biāo)簽

• 因?yàn)樗?value 只讀，所以它是 React 中的一個(gè)非受控組件

5、處理多個(gè)輸入

• 當(dāng)需要處理多個(gè) input 元素時(shí)，我們可以給每個(gè)元素添加 name 屬性，并讓處理函數(shù)根據(jù) event.target.name 的值選擇要執(zhí)行的操作。
• 示例：

• 使用了 ES6 計(jì)算屬性名稱(chēng)的語(yǔ)法更新給定輸入名稱(chēng)對(duì)應(yīng)的 state 值

6、受控輸入空值

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

7、受控組件的替代品

• 使用非受控組件, 這是實(shí)現(xiàn)輸入表單的另一種方式。

8、成熟的解決方案

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

---

關(guān)聯(lián)文章：

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

• React筆記——核心概念：2.JSX簡(jiǎn)介

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

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

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

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

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

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。