Paieškos juostos yra puikus būdas padėti vartotojams rasti tai, ko jiems reikia jūsų svetainėje. Jie taip pat naudingi analizei, jei stebite, ko ieško jūsų lankytojai.
Galite naudoti „React“, kad sukurtumėte paieškos juostą, kuri filtruoja ir rodo duomenis, kai vartotojas įveda tekstą. Naudojant „React“ kabliukus ir „JavaScript“ žemėlapio ir filtrų masyvo metodus, galutinis rezultatas yra jautrus, funkcionalus paieškos laukelis.
Paieškos juostos kūrimas
Paieška paims vartotojo įvestį ir suaktyvins filtravimo funkciją. Tu gali naudokite biblioteką, pvz., „Formik“, kad sukurtumėte formas „React“., bet taip pat galite sukurti paieškos juostą nuo nulio.
Jei neturite „React“ projekto ir norite sekti, sukurkite jį naudodami komandą „create-react-app“.
npx sukurti-reaguoti programa Paieška- baras
Viduje App.js failą, pridėkite formos elementą, įskaitant įvesties žymą:
eksportuotinumatytasfunkcijaProgramėlė() {
grąžinti (
<div>
<forma>
<įvesties tipas ="Paieška"/>
</form>
</div>
)
}
Turėtumėte naudoti useState
Reagavimo kabliukas ir onChange įvykis, skirtas įvesties valdymui. Taigi, importuokite useState ir pakeiskite įvestį, kad naudotumėte būsenos vertę:importuoti { useState } iš "Reaguoti"
eksportuotinumatytasfunkcijaProgramėlė() {
const [query, setquery] = useState('')
konst handleChange = (e) => {
užklausa(e.taikinys.vertė)
}
grąžinti (
<div>
<forma>
<įvesties tipas ="Paieška" value={query} onChange={handleChange}/>
</form>
</div>
)
}
Kiekvieną kartą, kai vartotojas ką nors įveda įvesties elemente, rankenaKeisti atnaujina būseną.
Įvesties pakeitimo duomenų filtravimas
Paieškos juosta turėtų suaktyvinti paiešką naudojant vartotojo pateiktą užklausą. Tai reiškia, kad duomenis turėtumėte filtruoti funkcijoje HandelChange. Taip pat turėtumėte sekti filtruotus duomenis būsenoje.
Pirmiausia pakeiskite būseną, kad įtrauktumėte duomenis:
konst [state, setstate] = useState({
užklausa: '',
sąrašą: []
})
Taip sujungus būsenos vertes, užuot sukūrus po vieną kiekvienai vertei, sumažinamas atvaizdų skaičius ir pagerėja našumas.
Filtruojami duomenys gali būti bet kokie, kurių norite atlikti paiešką. Pavyzdžiui, galite sukurti pavyzdinių tinklaraščio įrašų sąrašą, kaip šis:
konst įrašai = [
{
url: '',
žymės: ['reaguoti', 'dienoraštį'],
pavadinimas: „Kaip sukurti reakcija Paieška baras',
},
{
url:'',
žymės: ['mazgas','išreikšti'],
pavadinimas: 'Kaip pašiepti API duomenis „Node“.',
},
// daugiau duomenų čia
]
Tu taip pat gali gauti duomenis naudodami API iš CDN arba duomenų bazės.
Tada pakeiskite HandChange() funkciją, kad filtruotumėte duomenis, kai vartotojas įveda tekstą.
konst handleChange = (e) => {
konst rezultatai = posts.filter (post => {
if (e.target.value "") grąžinti pranešimus
grąžintipaštu.pavadinimas.to LowCase().apima(e.taikinys.vertė.to LowCase())
})
setstate({
užklausą: e.taikinys.vertė,
sąrašą: rezultatai
})
}
Funkcija grąžina įrašus jų neieškodama, jei užklausa tuščia. Jei vartotojas įvedė užklausą, jis patikrina, ar įrašo pavadinime yra užklausos tekstas. Įrašo pavadinimą ir užklausą pavertus mažosiomis raidėmis, palyginime neskiriamos didžiosios ir mažosios raidės.
Kai filtro metodas grąžina rezultatus, funkcija HandanChange atnaujina būseną su užklausos tekstu ir filtruotais duomenimis.
Paieškos rezultatų rodymas
Paieškos rezultatų rodymas apima sąrašo masyvo kilpą naudojant žemėlapį metodas ir kiekvieno elemento duomenų rodymas.
eksportuotinumatytasfunkcijaProgramėlė() {
// būsena ir HandChange() funkcija
grąžinti (
<div>
<forma>
<input onChange={handleChange} value={state.query} type="Paieška"/>
</form>
<ul>
{(state.query ''? "": state.list.map (post => {
grąžinti <li key={post.title}>{post.title}</li>
}))}
</ul>
</div>
)
}
ul žymos viduje komponentas patikrina, ar užklausa tuščia. Jei taip, rodoma tuščia eilutė, nes tai reiškia, kad vartotojas nieko neieškojo. Jei norite ieškoti jau rodomų elementų sąraše, pašalinkite šį žymėjimą.
Jei užklausa nėra tuščia, žemėlapio metodas kartojasi per paieškos rezultatus ir pateikia įrašų pavadinimus.
Taip pat galite pridėti varnelę, kurioje pateikiamas naudingas pranešimas, jei paieška neduoda rezultatų.
<ul>
{(state.query ''? "Nėra užklausą atitinkančių įrašų": !state.list.length? "Jūsų užklausa nedavė jokių rezultatų": state.list.map (post => {
grąžinti <li key={post.title}>{post.title}</li>
}))}
</ul>
Pridėjus šį pranešimą pagerėja vartotojo patirtis, nes vartotojas nepalieka tuščios vietos.
Daugiau nei vieną kartą paieškos parametro tvarkymas
Norėdami sukurti tinkintą paieškos elementą, kuris filtruoja duomenų masyvą, galite naudoti „React“ būseną ir „hoks“ kartu su „JavaScript“ įvykiais.
Filtro funkcija tik tikrina, ar užklausa atitinka vieną masyvo objektų savybę – pavadinimą. Galite patobulinti paieškos funkcionalumą naudodami loginį operatorių ARBA, kad užklausa atitiktų kitas objekto savybes.
