A keresősávok nagyszerű módja annak, hogy a felhasználók megtalálják, amire szükségük van az Ön webhelyén. Analitikai célokra is jók, ha nyomon követi, mit keresnek látogatói.

A React segítségével létrehozhat egy keresősávot, amely szűri és megjeleníti az adatokat, amikor a felhasználó gépel. A React hook-okkal és a JavaScript térkép- és szűrőtömb módszerekkel a végeredmény egy reszponzív, funkcionális keresőmező.

A keresősáv létrehozása

A keresés a felhasználótól veszi a bemenetet, és elindítja a szűrési funkciót. tudsz használjon olyan könyvtárat, mint a Formik, hogy űrlapokat hozzon létre a Reactban, de a semmiből is létrehozhat keresősávot.

Ha nincs React projektje, és követni szeretné, hozzon létre egyet a create-react-app paranccsal.

npx teremt-react-app keresés-rúd

Ban,-ben App.js fájl, adja hozzá az űrlapelemet, beleértve a bemeneti címkét:

exportalapértelmezettfunkcióApp() {
Visszatérés (
<div>
<forma>
<bemenet típusa="keresés"/>
</form>
</div>
 )
}

Használnia kell a useStateReagálás horog és a

instagram viewer
onChange esemény a bemenet vezérléséhez. Tehát importálja a useState-et, és módosítsa a bemenetet az állapotérték használatához:

import { useState } tól től "Reagál"
exportalapértelmezettfunkcióApp() {
 const [query, setquery] = useState('')
const handleChange = (e) => {
setquery(e.cél.érték)
 }
Visszatérés (
<div>
<forma>
<bemenet típusa="keresés" value={query} onChange={handleChange}/>
</form>
</div>
 )
 }

Minden alkalommal, amikor a felhasználó beír valamit a beviteli elembe, fogantyúChange frissíti az állapotot.

Adatok szűrése a bemeneti változásnál

A keresősávnak keresést kell indítania a felhasználó által megadott lekérdezéssel. Ez azt jelenti, hogy szűrnie kell az adatokat a handleChange függvényen belül. Nyomon kell követnie a szűrt adatokat is az állapotban.

Először módosítsa az állapotot az adatokkal:

const [state, setstate] = useState({
 lekérdezés: '',
lista: []
})

Az állapotértékek ilyen kötegelése ahelyett, hogy minden értékhez hozna létre egyet, csökkenti a megjelenítések számát, javítva a teljesítményt.

A szűrt adatok bármilyenek lehetnek, amelyeken keresést szeretne végezni. Létrehozhat például egy listát a mintablogbejegyzésekből, mint ez:

const hozzászólások = [
 { 
 url: '',
 címkék: ['reagál', 'blog'],
 cím: „Hogyan kell teremt egy reakció keresés rúd',
 },
 {
 url:'',
 címkék: ['csomópont','Expressz'],
 cím: 'Az API-adatok kigúnyolása a Node-ban',
 },
// további adatok itt
 ]

Te is lekérni az adatokat egy API segítségével CDN-ből vagy adatbázisból.

Ezután módosítsa a handleChange() függvényt az adatok szűréséhez, amikor a felhasználó a bemeneten belül gépel.

const handleChange = (e) => {
const eredmények = posts.filter (post => {
 if (e.target.value "") visszaküldi a hozzászólásokat
Visszatéréshozzászólás.cím.to LowCase().magába foglalja(e.cél.érték.to LowCase())
 })
 setstate({
lekérdezés: e.cél.érték,
lista: eredmények
 })
}

A függvény keresés nélkül adja vissza a bejegyzéseket, ha a lekérdezés üres. Ha a felhasználó beírt egy lekérdezést, akkor ellenőrzi, hogy a bejegyzés címe tartalmazza-e a lekérdezés szövegét. A bejegyzés címének és a lekérdezésnek kisbetűssé alakítása biztosítja, hogy az összehasonlításban a kis- és nagybetűk ne legyenek megkülönböztetve.

Miután a szűrőmódszer visszaadja az eredményeket, a handleChange függvény frissíti az állapotot a lekérdezés szövegével és a szűrt adatokkal.

A keresési eredmények megjelenítése

A keresési eredmények megjelenítése magában foglalja a listatömb áthurkolását a térkép módszert és az egyes tételekhez tartozó adatok megjelenítését.

exportalapértelmezettfunkcióApp() {
// állapot és a handleChange() függvény
Visszatérés (
<div>
<forma>
<input onChange={handleChange} value={state.query} type="keresés"/>
</form>
<ul>
 {(state.query ''? "": state.list.map (post => {
 Visszatérés <li key={post.title}>{postai cím}</li>
 }))}
</ul>
</div>
 )
}

Az ul címkén belül az összetevő ellenőrzi, hogy a lekérdezés üres-e. Ha igen, akkor üres karakterláncot jelenít meg, mert ez azt jelenti, hogy a felhasználó nem keresett semmit. Ha a már megjelenített elemek listájában szeretne keresni, távolítsa el ezt a pipát.

Ha a lekérdezés nem üres, a térképmódszer a keresési eredmények között iterál, és felsorolja a bejegyzések címeit.

Hozzáadhat egy pipát is, amely hasznos üzenetet jelenít meg, ha a keresés nem ad eredményt.

<ul>
 {(state.query ''? "Egyetlen bejegyzés sem felel meg a lekérdezésnek": !state.list.length? "Lekérdezése nem hozott eredményt": state.list.map (post => {
 Visszatérés <li key={post.title}>{postai cím}</li>
 }))}
</ul>

Ennek az üzenetnek a hozzáadása javítja a felhasználói élményt, mert a felhasználó nem marad üres helyen.

Többszöri keresési paraméter kezelése

A React állapot és a hook segítségével JavaScript-eseményekkel együtt egyéni keresési elemet hozhat létre, amely egy adattömböt szűr.

A szűrő funkció csak azt ellenőrzi, hogy a lekérdezés egyezik-e a tömbben lévő objektumok egyik tulajdonságával – a címmel. Javíthatja a keresési funkciókat, ha a logikai VAGY operátort használja, hogy a lekérdezést az objektum más tulajdonságaival párosítsa.