Otsinguribad on suurepärane viis aidata kasutajatel leida teie veebisaidilt seda, mida nad vajavad. Need sobivad hästi ka analüütikaks, kui jälgite, mida teie külastajad otsivad.
Reacti abil saate luua otsinguriba, mis filtreerib ja kuvab andmeid, kui kasutaja sisestab. Reacti konksude ning JavaScripti kaardi- ja filtrimassiivi meetoditega on lõpptulemuseks tundlik ja funktsionaalne otsingukast.
Otsinguriba loomine
Otsing võtab kasutajalt sisendi ja käivitab filtreerimisfunktsiooni. Sa saad kasutage Reactis vormide loomiseks teeki, nagu Formik, kuid saate luua ka nullist otsinguriba.
Kui teil pole Reacti projekti ja soovite seda jälgida, looge see, kasutades käsku create-react-app.
npx luua-reageerimisrakendus otsing-baar
Aastal App.js faili, lisage vormielement, sealhulgas sisendmärgend:
eksportidavaikimisifunktsiooniRakendus() {
tagasi (
<div>
<vormi>
<sisendi tüüp="otsing"/>
</form>
</div>
)
}
Sa peaksid kasutama useStateReageerimiskonks ja onChange sündmus sisendi juhtimiseks. Niisiis, importige useState ja muutke sisendit oleku väärtuse kasutamiseks:
importida { useState } alates "Reageeri"
eksportidavaikimisifunktsiooniRakendus() {
const [päring, setquery] = useState('')
konst HandChange = (e) => {
seadistus(e.sihtmärk.väärtus)
}
tagasi (
<div>
<vormi>
<sisendi tüüp="otsing" value={query} onChange={handleChange}/>
</form>
</div>
)
}
Iga kord, kui kasutaja sisestab midagi sisendelemendi sisse, käepideMuuda uuendab olekut.
Andmete filtreerimine sisendi muutmisel
Otsinguriba peaks käivitama otsingu, kasutades kasutaja esitatud päringut. See tähendab, et peaksite filtreerima andmed HandChange funktsioonis. Samuti peaksite jälgima osariigi filtreeritud andmeid.
Esiteks muutke olekut, et lisada andmed:
konst [state, setstate] = useState({
päring: '',
nimekirja: []
})
Olekuväärtuste selline komplekteerimine, selle asemel, et luua iga väärtuse jaoks üks, vähendab renderdamiste arvu, parandades jõudlust.
Filtreeritavad andmed võivad olla kõik, mida soovite otsida. Näiteks saate luua loendi näidisblogipostitustest, nagu see:
konst postitused = [
{
url: '',
sildid: ['reageerida', 'ajaveebi'],
pealkiri: "Kuidas luua reaktsioon otsing baar',
},
{
url:'',
sildid: ['sõlm','väljendada'],
pealkiri: 'Kuidas sõlmes API andmeid mõnitada',
},
// rohkem andmeid siit
]
Sa saad ka hankige andmed API abil CDN-ist või andmebaasist.
Järgmisena muutke funktsiooni HandChange(), et filtreerida andmed alati, kui kasutaja sisestab sisendisse.
konst HandChange = (e) => {
konst tulemused = posts.filter (post => {
if (e.target.value "") postituste tagastamine
tagasipostitus.title.to LowCase().sisaldab(e.sihtmärk.väärtus.to LowCase())
})
setstate({
päring: e.sihtmärk.väärtus,
nimekirja: tulemused
})
}
Funktsioon tagastab postitused ilma neid läbi otsimata, kui päring on tühi. Kui kasutaja on sisestanud päringu, kontrollib ta, kas postituse pealkiri sisaldab päringu teksti. Postituse pealkirja ja päringu teisendamine väiketähtedeks tagab, et võrdlus on tõstutundlik.
Kui filtreerimismeetod tagastab tulemused, värskendab funktsioon handleChange olekut päringu teksti ja filtreeritud andmetega.
Otsingutulemuste kuvamine
Otsingutulemuste kuvamine hõlmab loendi massiivi silmust, kasutades kaart meetod ja iga üksuse andmete kuvamine.
eksportidavaikimisifunktsiooniRakendus() {
// olek ja handChange() funktsioon
tagasi (
<div>
<vormi>
<sisend onChange={handleChange} value={state.query} type="otsing"/>
</form>
<ul>
{(state.query ''? "": state.list.map (postitus => {
tagasi <li key={post.title}>{post.title}</li>
}))}
</ul>
</div>
)
}
Märgendi ul sees kontrollib komponent, kas päring on tühi. Kui on, kuvab see tühja stringi, kuna see tähendab, et kasutaja pole midagi otsinud. Kui soovite otsida juba kuvatavate üksuste loendist, eemaldage see linnuke.
Kui päring pole tühi, kordab kaardimeetod otsingutulemusi ja loetleb postituste pealkirjad.
Saate lisada ka linnukese, mis kuvab kasuliku sõnumi, kui otsing ei anna tulemusi.
<ul>
{(state.query ''? "Päringule ei vasta ükski postitus": !state.list.length? "Teie päring ei andnud tulemusi": state.list.map (postitus => {
tagasi <li key={post.title}>{post.title}</li>
}))}
</ul>
Selle sõnumi lisamine parandab kasutajakogemust, sest kasutaja ei jäeta tühja kohta vaatama.
Rohkem kui ühe korra otsinguparameetri käsitlemine
Saate kasutada reageerimisolekut ja konkse koos JavaScripti sündmustega, et luua kohandatud otsinguelement, mis filtreerib andmemassiivi.
Filtrifunktsioon kontrollib ainult seda, kas päring vastab massiivi objektide ühele atribuudile – pealkirjale. Otsingufunktsioone saate täiustada, kasutades loogilist operaatorit VÕI, et sobitada päring objekti muude atribuutidega.
