沐鳴娛樂業務:_用 React Hooks 做一個搜索欄

以下是我們將要構建的搜索框的動圖。這是一個簡單的搜索框,我們可以用它來搜索聯繫人列表。我們將使用函數式組件,而不是基於類的組件來實現它。

下面就開始吧。首先創建一個新的 react 應用:

npxcreate-react-appcontacts-list

然後轉到 contacts-list 目錄。在你常用的代碼編輯器中打開目錄。就我而言,我使用的是 vscode,因此我要從命令行執行的操作是:

code.

在 src 目錄中創建一個名為 components 的新文件夾,並在其中創建一個 Numbers.js 文件。轉到你的 App.js 文件並導入 Numbers.js 組件。

接下來我們需要創建一些人名,然後將這些人名作為 props 傳遞給 Numbers.js 組件來渲染。

importReact, { useState }from"react";
import{ Numbers }from"./components/Numbers";
exportconstApp =()=>{
const[persons] = useState([
{name:"Dayo Olorinla",number:"+234-1234-5678"},
{name:"Temi Otedola",number:"+234-9029-9229"},
{name:"Zlatan Ibile",number:"+234-1243-2345"},
]);

return(
<div>
<Numberspersons={persons}/>
</div>
);
};
export default App;

現在在我們的 Numbers 組件中,我們將接收從 App 傳遞過來的 props,並使用它來显示 contacts list 。

參見下面的代碼,其中包含每個步驟的解釋說明。

importRect, { useStae }from"react";
exportconstNumbers =props=>{
// word 會跟蹤 filter box 內輸入的任何更改
const[word, setword] = useState("");
// filterdisplay 會基於 search 來显示更新的列表,其默認狀態是我們的 persons 列表 prop
const[filterDispllay, setFilterDisplay] = useStae(props.persons);
// handleChange 每次運行時在輸入字段都會有一個更改
consthandleChange =e=>{
// 在一個新數組中存放原始列表,將所有人名轉為小寫字母,因為我們不知道用戶要輸入什麼格式;然後我們返回 OldList 作為一個對象數組,來存放這個更改的列表
letoldList = props.persons.map(person=>{
return{name: person.name.toLowerCase(),number: person.number };
});
// 如果輸入欄不為空,則運行以下代碼;否則,setFilterDisplay 設為原始列表 prop
if(e !=="") {
letnewList =[];
// setWord 一直跟蹤輸入的任何更改
setWord(e);
// newList 是保存符合搜索參數的 persons 的數組
newList = oldList.filter(person=>
// 我們調用 includes 方法並用小寫傳遞進'word'狀態,這會檢查 oldList 是否包含名字中帶有'word'的人名
person.name.includes(word.toLowerCase())
);
// 我們會一直檢查輸入並返回 newList 數組。我們調用 setFilterDisplay 來在每次輸入調整后更新狀態
setFilterDisplay(newList);
}
};
return(
<div>
<hl>Number</hl>
filter:<inputonChange={e=>handleChange(e.target.value)} />
{filterDisplay.map((person, i) => (
<divkey={i}>
<li>
{person.name}  
<span>{person.number}</span>
</li>
</div>
))}
</div>
);
};

最後,每次更新時,我們都會從 FilterDisplay 返回更新的信息。如果你和我一樣想將搜索欄分成一個單獨的組件,請繼續看下去。下面我們來重構這個東西!將搜索拆分成一個單獨的組件后,我們就可以在應用程序的其他組件中使用同樣的搜索欄了。

首先我們創建一個 Filter 組件,在我們的 components 文件夾中將其命名為 Filter.js 。它需要 2 個 props,分別用於輸入值和 onChange 事件。

importReactfrom"react";
exportconstFilter =({ value, handleChange }) =>{
return(
<div>
filter:<inputvalue={value}onChange={handleChange}/>
</div>
);
};

接下來我們需要重構 Numbers.js 組件,讓它只渲染過濾過的人員列表。它將接受一個 prop,也就是 list/array。

importReactfrom"react";
exportconstNumbers =({ persons }) =>{
return(
<div>
<hl>Numbers</hl>
{person.map((person, i) => (
<divkey={i}>
<li>
{person.name}  
<span>{person.number}</span>
</li>
</div>
))}
</div>
);
};

回想一下,我們所有的狀態都在 App 組件內管理,並作為 props 傳遞給我們的組件。最後,在 App 組件中我們將一個有狀態值傳遞給 Filter 組件中的輸入字段,還將傳遞一個 handleChange 方法,當輸入字段中發生更改時將調用這個方法。

importReact, { useState } from"react";
import{ Filter } from"./components/Filter";
import{ Numbers } from"./components/Numbers";
export const App = () => {
const [word, setWord] = useState("");
const [persons] = useState([
{name:"Dayo Olorinla",number:"+234-1244-5678"},
{name:"Temi Otedola",number:"+234-9029-9229"},
{name:"Zlatan Ibile",number:"+234-1243-2345"}
]);
const [filterDisplay, setFilterDisplay] = useState([]);

const handleChange = e => {
setWord(e);
letoldList = persons.map(person => {
return{name: person.name.toLowerCase(),number: person.number};
});

if(word !=="") {
letnewList = [];

newList = oldList.filter(person =>
person.name.includes(word.toLowerCase())
);

setFilterDisplay(newList);
}else{
setFilterDisplay(persons);
}
};

return(
<div>
<Filtervalue={word}handleChange={e => handleChange(e.target.value)}/>
<Numberspersons={word.length <1? persons : filterDisplay}/>
</div>
);
};
exportdefaultApp;

在 return 中,我們的 Numbers 組件將始終檢查輸入字段是否為空白。如果是的話就渲染原始的 Persons 數組,否則我們根據在輸入字段中輸入的內容渲染列表。就是這樣,搞定!

英文原文:How to Build a Search Bar in React With React Hooks

站長推薦

1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/8758