React 受控組件,Hooks 方式!

做者:Shadeed
譯者:前端小智
來源:dmitripavlutin
點贊再看,微信搜索 大遷世界,B站關注 前端小智這個沒有大廠背景,但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄,文章的已分類,也整理了不少個人文檔,和教程資料。

最近開源了一個 Vue 組件,還不夠完善,歡迎你們來一塊兒完善它,也但願你們能給個 star 支持一下,謝謝各位了。javascript

github 地址:https://github.com/qq44924588...前端

React 提供了兩種方法來訪問input字段的值:使用受控或非受控組件。我更喜歡受控組件,由於咱們能夠經過組件的狀態讀取和設置input的值。vue

在這篇文章中,咱們來看看如何使用React Hook 實現受控組件。java

1.受控組件

假設咱們有一個簡單的文本字段,而且想訪問其值: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} />
    </>
  )
}

image

打開示例(https://codesandbox.io/s/cont...。能夠看到 value 變量包含input字段中的值,而且在每次輸入新值時,它也會更新。git

input字段受到控制,由於 React 從狀態<input value = {value} ... />設置其值。 當用戶在input 中輸入內容時,onChange處理程序會使用從事件對象event.target.value訪問的輸入值來更新狀態。github

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

受控組件方法能夠幫助咱們訪問任何輸入類型的值:常規文本輸入、textareaselect 等。數組

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

設置受控組件須要3個步驟:微信

  1. 定義保存input值的狀態:const [value, setValue] = useState(")
  2. 建立事件處理程序,該事件處理程序在值更改時更新狀態:
const onChange = event => setValue(event.target.value);

3.爲input字段分配狀態值,並添加事件處理程序:<input type="text" value={value} onChange={onChange} />

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>
 <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...,能夠自行試試。

image

對輸入進行防抖

在前面的實現中,只要在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>
  );
}

image

打開演示(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和完善,你們面試能夠參照考點複習,另外關注公衆號,後臺回覆福利,便可看到福利,你懂的。

相關文章
相關標籤/搜索