react受控元件是什麼

在react中，受控元件指的是透過回呼函數來更新目前值的元件；渲染表單的React元件也控制使用者輸入過程中表單發生的操作，每當表單的狀態改變時，都會被寫入到元件的state中，這種元件在React稱為受控元件。

本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

react受控元件是什麼

 渲染表單的 React 元件也控制著使用者輸入過程中表單發生的操作。被 React 以這種方式控制取值的表單輸入元素就叫做「受控元件」。

有網友這樣解釋：在React中，每當表單的狀態改變時，都會被寫入到元件的state中，這種元件在React稱為受控元件。

受控元件的更新流程：

• 1，可以透過在初始state中設定表單的預設值

• 2，每當表單的值改變時，呼叫onChange事件處理器，

• 3，事件處理器透過事件物件e拿到改變後的狀態，改變state；

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

受控組件是透過透過回調函數來更新目前值，譬如OnChange 。父元件則透過回呼函數控制並管理它的狀態並將新值作為屬性傳遞給它。受控組件也稱為“啞巴組件”。

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} />;
}

擴充知識：

什麼是不受控元件？

不受控元件則是內部儲存自身狀態的元件，可以使用 ref 查詢 DOM，以便在需要時找到其目前值。有點像傳統的 HTML。大多數原生的 React 表單元件都支援受控和不受控:

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

4 它們之間有什麼區別？

在受控元件中，表單資料由 React 元件處理。而在不受控元件中，表單資料由 DOM 本身處理。

對於受控元件，必須使用元件狀態。對於不受控制的組件，狀態的使用是完全可選的，但必須在其中使用 Refs 。

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

【相關推薦：javascript影片教學、web前端】

以上是react受控元件是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！