做者:Shadeed
譯者:前端小智
來源:dmitripavlutin
點贊再看,微信搜索
【大遷世界】,B站關注
【前端小智】這個沒有大廠背景,但有着一股向上積極心態人。本文
GitHub
https://github.com/qq44924588... 上已經收錄,文章的已分類,也整理了不少個人文檔,和教程資料。
最近開源了一個 Vue 組件,還不夠完善,歡迎你們來一塊兒完善它,也但願你們能給個 star 支持一下,謝謝各位了。javascript
github 地址:https://github.com/qq44924588...前端
React 提供了兩種方法來訪問input
字段的值:使用受控或非受控組件。我更喜歡受控組件,由於咱們能夠經過組件的狀態讀取和設置input
的值。vue
在這篇文章中,咱們來看看如何使用React Hook 實現受控組件。java
假設咱們有一個簡單的文本字段,而且想訪問其值:react
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/cont...。能夠看到 value
變量包含input
字段中的值,而且在每次輸入新值時,它也會更新。git
input
字段受到控制,由於 React 從狀態<input value = {value} ... />
設置其值。 當用戶在input
中輸入內容時,onChange
處理程序會使用從事件對象event.target.value
訪問的輸入值來更新狀態。github
value
變量表示用戶真實輸入的值。每次須要訪問用戶在input
字段中輸入的值時,只需讀取value狀態變量。面試
受控組件方法能夠幫助咱們訪問任何輸入類型的值:常規文本輸入、textarea
、select
等。數組
設置受控組件須要3個步驟:微信
input
值的狀態:const [value, setValue] = useState(")
。const onChange = event => setValue(event.target.value);
3.爲input
字段分配狀態值,並添加事件處理程序:<input type="text" value={value} onChange={onChange} />
。
咱們看一個更復雜的例子。 頁面中有一組員工姓名列表。 咱們須要添加一個 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> <h2>Employees List</h2> <input type="text" value={query} onChange={onChange} /> <div className="list"> {filteredEmployees.map(name => <div>{name}</div>)} </div> </div> ); }
打開演示(https://codesandbox.io/s/grac...,能夠自行試試。
在前面的實現中,只要在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> <h2>Employees List</h2> <input type="text" value={query} onChange={onChange} /> <div className="list"> {filteredEmployees.map(name => <div>{name}</div>)} </div> </div> ); }
打開演示(https://codesandbox.io/s/affe...,而後在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
值的單一真實源。
~ 完,咱們小智,我要去刷碗了,下期再見~
代碼部署後可能存在的BUG無法實時知道,過後爲了解決這些BUG,花了大量的時間進行log 調試,這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。
原文:https://dmitripavlutin.com/co...
文章每週持續更新,能夠微信搜索「 大遷世界 」第一時間閱讀和催更(比博客早一到兩篇喲),本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄,整理了不少個人文檔,歡迎Star和完善,你們面試能夠參照考點複習,另外關注公衆號,後臺回覆福利,便可看到福利,你懂的。