Trake za pretraživanje izvrstan su način da korisnicima pomognete pronaći ono što im je potrebno na vašoj web stranici. Također su dobri za analitiku ako pratite što vaši posjetitelji traže.
Možete koristiti React za izradu trake za pretraživanje koja filtrira i prikazuje podatke dok korisnik upisuje. Uz React kuke i metode mapiranja JavaScripta i polja filtera, krajnji rezultat je odgovarajući, funkcionalni okvir za pretraživanje.
Stvaranje trake za pretraživanje
Pretraživanje će uzeti unos od korisnika i pokrenuti funkciju filtriranja. Možeš koristiti biblioteku kao što je Formik za stvaranje obrazaca u Reactu, ali također možete stvoriti traku za pretraživanje od nule.
Ako nemate React projekt i želite ga pratiti, izradite ga pomoću naredbe create-react-app.
npx stvoriti-aplikacija za reagiranje traži-bar
u App.js datoteku, dodajte element obrasca, uključujući oznaku unosa:
izvozzadanofunkcijaaplikacija() {
povratak (
<div>
<oblik>
<vrsta unosa="traži"/>
</form>
</div>
)
}
Trebali biste koristiti
useStateReagirajte kuku i onChange događaj za kontrolu unosa. Dakle, uvezite useState i modificirajte unos tako da koristi vrijednost stanja:uvoz {useState} iz "Reagirati"
izvozzadanofunkcijaaplikacija() {
const [upit, setquery] = useState('')
konst handleChange = (e) => {
postavljanje upita(e.cilj.vrijednost)
}
povratak (
<div>
<oblik>
<vrsta unosa="traži" vrijednost={upit} onChange={handleChange}/>
</form>
</div>
)
}
Svaki put kada korisnik upiše nešto unutar ulaznog elementa, handleChange ažurira stanje.
Filtriranje podataka o promjeni unosa
Traka za pretraživanje trebala bi pokrenuti pretraživanje pomoću upita koji korisnik unese. To znači da biste trebali filtrirati podatke unutar funkcije handleChange. Također biste trebali pratiti filtrirane podatke u stanju.
Najprije promijenite stanje tako da uključuje podatke:
konst [stanje, setstate] = useState({
upit: '',
popis: []
})
Ovako grupiranje vrijednosti stanja, umjesto stvaranja jedne za svaku vrijednost, smanjuje broj iscrtavanja, poboljšavajući performanse.
Podaci koje filtrirate mogu biti bilo što što želite izvršiti pretraživanje. Na primjer, možete izraditi popis oglednih postova na blogu kao što je ovaj:
konst postovi = [
{
url: '',
oznake: ['reagirati', 'blog'],
naslov: 'Kako stvoriti a reagirati traži bar',
},
{
url:'',
oznake: ['čvor','izraziti'],
titula: 'Kako ismijavati api podatke u Nodeu',
},
// više podataka ovdje
]
Također možete dohvaćanje podataka pomoću API-ja iz CDN-a ili baze podataka.
Zatim promijenite funkciju handleChange() da filtrira podatke kad god korisnik upiše unutar unosa.
konst handleChange = (e) => {
konst rezultati = postovi.filter (post => {
if (e.target.value "") povratne objave
povratakobjaviti.titula.u mala slova().uključuje(e.cilj.vrijednost.u mala slova())
})
setstate({
upit: e.cilj.vrijednost,
popis: rezultati
})
}
Funkcija vraća objave bez pretraživanja ako je upit prazan. Ako je korisnik upisao upit, provjerava sadrži li naslov objave tekst upita. Pretvaranje naslova posta i upita u mala slova osigurava da usporedba ne razlikuje velika i mala slova.
Nakon što metoda filtera vrati rezultate, funkcija handleChange ažurira stanje s tekstom upita i filtriranim podacima.
Prikaz rezultata pretraživanja
Prikaz rezultata pretraživanja uključuje ponavljanje niza popisa pomoću karta način i prikaz podataka za svaku stavku.
izvozzadanofunkcijaaplikacija() {
// stanje i funkcija handleChange().
povratak (
<div>
<oblik>
<input onChange={handleChange} value={state.query} type="traži"/>
</form>
<ul>
{(stanje.upit ''? "": state.list.map (post => {
povratak <li ključ={post.title}>{post.title}</li>
}))}
</ul>
</div>
)
}
Unutar ul oznake, komponenta provjerava da li je upit prazan. Ako jest, prikazuje prazan niz jer to znači da korisnik nije ništa tražio. Ako želite pretraživati popis stavki koje već prikazujete, uklonite ovu oznaku.
Ako upit nije prazan, metoda karte ponavlja rezultate pretraživanja i navodi naslove postova.
Također možete dodati oznaku koja prikazuje korisnu poruku ako pretraživanje ne vrati rezultate.
<ul>
{(stanje.upit ''? "Nijedan post ne odgovara upitu": !state.list.length? "Vaš upit nije dao nikakve rezultate": state.list.map (post => {
povratak <li ključ={post.title}>{post.title}</li>
}))}
</ul>
Dodavanje ove poruke poboljšava korisničko iskustvo jer korisnik ne gleda u prazan prostor.
Rukovanje parametrom pretraživanja više od jednom
Možete koristiti React stanje i kuke, zajedno s JavaScript događajima, za stvaranje prilagođenog elementa pretraživanja koji filtrira niz podataka.
Funkcija filtra samo provjerava podudara li se upit s jednim svojstvom—naslovom—u objektima unutar polja. Funkcionalnost pretraživanja možete poboljšati korištenjem logičkog ILI operatora za podudaranje upita s drugim svojstvima u objektu.
