這篇文章主要介紹“如何理解React受控組件Hooks方式”，在日常操作中，相信很多人在如何理解React受控組件Hooks方式問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”如何理解React受控組件Hooks方式”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！
云縣網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),云縣網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為云縣上1000家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的云縣做網(wǎng)站的公司定做！
假設(shè)我們有一個(gè)簡(jiǎn)單的文本字段，并且想訪問其值：
重慶分公司
重慶分公司
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字段中的值，并且在每次輸入新值時(shí)，它也會(huì)更新。
input字段受到控制，因?yàn)?React 從狀態(tài)設(shè)置其值。當(dāng)用戶在input 中輸入內(nèi)容時(shí)，onChange處理程序會(huì)使用從事件對(duì)象event.target.value訪問的輸入值來更新狀態(tài)。
value變量表示用戶真實(shí)輸入的值。每次需要訪問用戶在input字段中輸入的值時(shí)，只需讀取value狀態(tài)變量。
受控組件方法可以幫助我們?cè)L問任何輸入類型的值:常規(guī)文本輸入、textarea、select 等。
設(shè)置受控組件需要3個(gè)步驟：
定義保存input值的狀態(tài):const [value, setValue] = useState(")。
創(chuàng)建事件處理程序，該事件處理程序在值更改時(shí)更新狀態(tài)：
const onChange = event => setValue(event.target.value);
3.為input字段分配狀態(tài)值，并添加事件處理程序：。
我們看一個(gè)更復(fù)雜的例子。頁面中有一組員工姓名列表。我們需要添加一個(gè) input字段，當(dāng)用戶在此字段中鍵入內(nèi)容時(shí)，員工列表將按姓名進(jìn)行過濾。
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})} 打開演示(https://codesandbox.io/s/gracious-dawn-29qi6?file=/src/App.js)，可以自行試試。
在前面的實(shí)現(xiàn)中，只要在input中輸入一個(gè)字符，就會(huì)立即過濾列表。這并不總是很方便，因?yàn)樵谳斎氩樵儠r(shí)它會(huì)分散用戶的注意力。
我們通過debounce來改善用戶體驗(yàn)：在最后一次更改后，以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 ( Employees List
{filteredEmployees.map(name => {name})} 打開演示(https://codesandbox.io/s/affectionate-swartz-9yk2u?file=/src/App.js)，然后在input中輸放值進(jìn)行查詢。員工列表不會(huì)在你打字時(shí)進(jìn)行過濾，而是在最近一次按下鍵400毫秒后進(jìn)行過濾。
下面是useDebouncedValue()的實(shí)現(xiàn)
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字段的值的一種方便的技術(shù)。它不使用引用，而是作為訪問input值的單一真實(shí)源。
到此，關(guān)于“如何理解React受控組件Hooks方式”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！
