Iskalne vrstice so odličen način, da uporabnikom pomagate najti tisto, kar potrebujejo na vašem spletnem mestu. Prav tako so dobri za analitiko, če spremljate, kaj vaši obiskovalci iščejo.
React lahko uporabite za izdelavo iskalne vrstice, ki filtrira in prikazuje podatke, ko uporabnik tipka. S kljukicami React in metodami zemljevida in filtra JavaScript je končni rezultat odzivno, funkcionalno iskalno polje.
Ustvarjanje iskalne vrstice
Iskanje bo vneslo uporabnik in sprožilo funkcijo filtriranja. Ti lahko uporabite knjižnico, kot je Formik, za ustvarjanje obrazcev v Reactu, lahko pa tudi ustvarite iskalno vrstico iz nič.
Če nimate projekta React in želite slediti, ga ustvarite z ukazom create-react-app.
npx ustvariti-react-aplikacija Iskanje-bar
V App.js dodajte element obrazca, vključno z vnosno oznako:
izvozprivzetofunkcijoaplikacija() {
vrnitev (
<div>
<oblika>
<vrsta vnosa="Iskanje"/>
</form>
</div>
)
}
Moral bi uporabiti useStateReact hook in onChange dogodek za nadzor vnosa. Torej uvozite useState in spremenite vnos za uporabo vrednosti stanja:
uvoz {useState} od "Reagiraj"
izvozprivzetofunkcijoaplikacija() {
const [poizvedba, nastavitev poizvedbe] = useState('')
konst handleChange = (e) => {
setquery(e.tarča.vrednost)
}
vrnitev (
<div>
<oblika>
<vrsta vnosa="Iskanje" vrednost={poizvedba} onChange={handleChange}/>
</form>
</div>
)
}
Vsakič, ko uporabnik nekaj vnese znotraj vnosnega elementa, handleChange posodablja stanje.
Filtriranje podatkov o spremembi vnosa
Iskalna vrstica mora sprožiti iskanje z uporabo poizvedbe, ki jo poda uporabnik. To pomeni, da bi morali filtrirati podatke znotraj funkcije handleChange. Prav tako morate spremljati filtrirane podatke v stanju.
Najprej spremenite stanje, da bo vključevalo podatke:
konst [stanje, setstate] = useState({
poizvedba: '',
seznam: []
})
Tako združevanje vrednosti stanja, namesto da bi ustvarili eno za vsako vrednost, zmanjša število upodobitev in izboljša zmogljivost.
Podatki, ki jih filtrirate, so lahko karkoli, po čemer želite izvesti iskanje. Ustvarite lahko na primer seznam vzorčnih objav v spletnem dnevniku, kot je ta:
konst objave = [
{
url: '',
oznake: ['reagirati', 'blog'],
naslov: 'Kako ustvariti reagirati Iskanje bar',
},
{
url:'',
oznake: ['vozlišče','ekspresno'],
naslov: 'Kako se norčevati iz podatkov api v Node',
},
// več podatkov tukaj
]
Lahko tudi pridobivanje podatkov z uporabo API-ja iz CDN ali baze podatkov.
Nato spremenite funkcijo handleChange(), da filtrira podatke vsakič, ko uporabnik vnese vnos.
konst handleChange = (e) => {
konst rezultati = objave.filter (objava => {
če (e.target.value "") vrni objave
vrnitevpost.naslov.toLowerCase().vključuje(e.tarča.vrednost.toLowerCase())
})
setstate({
poizvedbo: e.tarča.vrednost,
seznam: rezultati
})
}
Funkcija vrne objave brez iskanja po njih, če je poizvedba prazna. Če je uporabnik vnesel poizvedbo, preveri, ali naslov objave vključuje besedilo poizvedbe. Pretvorba naslova objave in poizvedbe v male črke zagotavlja, da primerjava ne razlikuje med velikimi in malimi črkami.
Ko metoda filtra vrne rezultate, funkcija handleChange posodobi stanje z besedilom poizvedbe in filtriranimi podatki.
Prikaz rezultatov iskanja
Prikaz rezultatov iskanja vključuje zanko po matriki seznama z uporabo zemljevid način in prikaz podatkov za vsako postavko.
izvozprivzetofunkcijoaplikacija() {
// stanje in funkcija handleChange().
vrnitev (
<div>
<oblika>
<input onChange={handleChange} value={state.query} type="Iskanje"/>
</form>
<ul>
{(stanje.poizvedba ''? "": state.list.map (post => {
vrnitev <li key={post.title}>{post.title}</li>
}))}
</ul>
</div>
)
}
Znotraj oznake ul komponenta preveri, ali je poizvedba prazna. Če je, prikaže prazen niz, ker to pomeni, da uporabnik ni iskal ničesar. Če želite iskati po seznamu elementov, ki jih že prikazujete, odstranite to kljukico.
Če poizvedba ni prazna, metoda zemljevida ponovi rezultate iskanja in navede naslove objav.
Dodate lahko tudi kljukico, ki prikaže koristno sporočilo, če iskanje ne vrne rezultatov.
<ul>
{(stanje.poizvedba ''? "Nobena objava ne ustreza poizvedbi": !state.list.length? "Vaša poizvedba ni vrnila nobenega rezultata": state.list.map (post => {
vrnitev <li key={post.title}>{post.title}</li>
}))}
</ul>
Dodajanje tega sporočila izboljša uporabniško izkušnjo, ker uporabnik ne gleda v prazen prostor.
Ravnanje z iskalnim parametrom Več kot enkrat
Za ustvarjanje iskalnega elementa po meri, ki filtrira niz podatkov, lahko uporabite stanje React in kavlje skupaj z dogodki JavaScript.
Funkcija filtra samo preveri, ali se poizvedba ujema z eno lastnostjo – naslovom – v objektih znotraj matrike. Funkcionalnost iskanja lahko izboljšate z uporabo logičnega operatorja ALI za ujemanje poizvedbe z drugimi lastnostmi v objektu.
