在react中，受控組件指的是通過回調(diào)函數(shù)來更新當(dāng)前值的組件；渲染表單的React組件還控制著用戶輸入過程中表單發(fā)生的操作，每當(dāng)表單的狀態(tài)發(fā)生變化時，都會被寫入到組件的state中，這種組件在React被稱為受控組件。

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react受控組件是什么

渲染表單的 React 組件還控制著用戶輸入過程中表單發(fā)生的操作。被 React 以這種方式控制取值的表單輸入元素就叫做“受控組件”。

有網(wǎng)友這樣解釋：在React中，每當(dāng)表單的狀態(tài)發(fā)生變化時，都會被寫入到組件的state中，這種組件在React被稱為受控組件。

受控組件的更新流程：

• 1，可以通過在初始state中設(shè)置表單的默認值

• 2，每當(dāng)表單的值發(fā)生變化時，調(diào)用onChange事件處理器，

• 3，事件處理器通過事件對象e拿到改變后的狀態(tài)，改變state；

• 4，setState觸發(fā)視圖更新，完成表單組件值的更新

受控組件是通過通過回調(diào)函數(shù)來更新當(dāng)前值，譬如 OnChange。父組件則通過回調(diào)函數(shù)控制并管理它的狀態(tài)并將新值作為屬性傳給它。受控組件也稱為“啞巴組件”。

const { useState } from 'react'; function Controlled () {   const [email, setEmail] = useState();   const handleInput = (e) => setEmail(e.target.value);   return <input type="text" value={email} onChange={handleInput} />; }

擴展知識：

什么是不受控組件？

不受控組件則是內(nèi)部存儲自身狀態(tài)的組件，可以使用 ref 查詢 DOM，以便在需要時查找其當(dāng)前值。有點像傳統(tǒng)的 HTML。大多數(shù)原生的 React 表單組件都支持受控和不受控:

const { useRef } from 'react'; function Example () {   const inputRef = useRef(null);   return <input type="text" defaultValue="bar" ref={inputRef} /> }

4 它們之間有什么區(qū)別？

在受控組件中，表單數(shù)據(jù)由 React 組件處理。而在不受控組件中，表單數(shù)據(jù)由 DOM 本身處理。

對于受控組件，必須使用組件狀態(tài)。對于不受控制的組件，狀態(tài)的使用是完全可選的，但必須在其中使用 Refs 。

對于受控組件，我們可以在輸入時進行驗證，但對于不受控組件則不能進行驗證。

【