這篇文章主要介紹“如何理解React受控組件Hooks方式”，在日常操作中，相信很多人在如何理解React受控組件Hooks方式問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何理解React受控組件Hooks方式”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

云縣網站建設公司成都創新互聯,云縣網站設計制作，有大型網站制作公司豐富經驗。已為云縣上1000家提供企業網站建設服務。企業網站搭建\外貿網站制作要多少錢，請找那個售后服務好的云縣做網站的公司定做！

1.受控組件

假設我們有一個簡單的文本字段，并且想訪問其值：

import { useState } from 'react';  function MyControlledInput({ }) {   const [ value, setValue ] = useState('');   const onChange = (event) => {     setValue(event.target.value);   }      return (     <>         
Input value: {value}
                 ) }

打開示例(https://codesandbox.io/s/controlled-component-uwf8n)并在輸入框中輸入。可以看到 value  變量包含input字段中的值，并且在每次輸入新值時，它也會更新。

input字段受到控制，因為 React 從狀態設置其值。當用戶在input  中輸入內容時，onChange處理程序會使用從事件對象event.target.value訪問的輸入值來更新狀態。

value變量表示用戶真實輸入的值。每次需要訪問用戶在input字段中輸入的值時，只需讀取value狀態變量。

受控組件方法可以幫助我們訪問任何輸入類型的值:常規文本輸入、textarea、select 等。

2. 受控組件中的3個步驟中

設置受控組件需要3個步驟：

定義保存input值的狀態:const [value, setValue] = useState(")。

創建事件處理程序，該事件處理程序在值更改時更新狀態：

const onChange = event => setValue(event.target.value);

3.為input字段分配狀態值，并添加事件處理程序：。

3. state 作為真實的數組源

我們看一個更復雜的例子。頁面中有一組員工姓名列表。我們需要添加一個 input字段，當用戶在此字段中鍵入內容時，員工列表將按姓名進行過濾。

function FilteredEmployeesList({ employees }) {  const [query, setQuery] = useState('');    const onChange = event => setQuery(event.target.value);   const filteredEmployees = employees.filter(name => {     return name.toLowerCase().includes(query.toLowerCase());   });    return (     
  
Employees List
      {filteredEmployees.map(name => 
{name}
)}