如何理解React受控組件Hooks方式

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

1.受控組件

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

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

打開示例(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 (     <div>  <h3>Employees List</h3>  <input          type="text"   value={query}        onChange={onChange}      />  <div className="list">  {filteredEmployees.map(name => <div>{name}</div>)}  </div>  </div>   ); }

打開演示(https://codesandbox.io/s/gracious-dawn-29qi6?file=/src/App.js)，可以自行試試。

對輸入進行防抖

在前面的實現中，只要在input中輸入一個字符，就會立即過濾列表。這并不總是很方便，因為在輸入查詢時它會分散用戶的注意力。

我們通過debounce來改善用戶體驗：在最后一次更改后，以400毫秒的延遲過濾列表。

import { useDebouncedValue } from './useDebouncedValue'; function FilteredEmployeesList({ employees }) {   const [query, setQuery] = useState('');  const debouncedQuery = useDebouncedValue(query, 400);     const onChange = event => setQuery(event.target.value);    const filteredEmployees = employees.filter(name => {  return name.toLowerCase().includes(debouncedQuery.toLowerCase());  });    return (     <div>  <h3>Employees List</h3>  <input          type="text"          value={query}          onChange={onChange}       />  <div className="list">  {filteredEmployees.map(name => <div>{name}</div>)}  </div>  </div>   ); }

打開演示(https://codesandbox.io/s/affectionate-swartz-9yk2u?file=/src/App.js)，然后在input中輸放值進行查詢。員工列表不會在你打字時進行過濾，而是在最近一次按下鍵400毫秒后進行過濾。

下面是useDebouncedValue()的實現

export function useDebouncedValue(value, wait) {   const [debouncedValue, setDebouncedValue] = useState(value);    useEffect(() => {     const id = setTimeout(() => setDebouncedValue(value), wait);     return () => clearTimeout(id);   }, [value]);    return debouncedValue; }

受控組件是訪問React中input字段的值的一種方便的技術。它不使用引用，而是作為訪問input值的單一真實源。

到此，關于“如何理解React受控組件Hooks方式”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！