Barele de căutare sunt o modalitate excelentă de a ajuta utilizatorii să găsească ceea ce au nevoie pe site-ul dvs. web. De asemenea, sunt bune pentru analiză dacă ține evidența ceea ce caută vizitatorii tăi.
Puteți folosi React pentru a crea o bară de căutare care filtrează și afișează date pe măsură ce utilizatorul introduce. Cu cârligele React și cu hărțile JavaScript și cu metodele de matrice de filtrare, rezultatul final este o casetă de căutare receptivă și funcțională.
Crearea barei de căutare
Căutarea va prelua intrarea de la un utilizator și va declanșa funcția de filtrare. Puteți utilizați o bibliotecă precum Formik pentru a crea formulare în React, dar puteți crea și o bară de căutare de la zero.
Dacă nu aveți un proiect React și doriți să urmați, creați unul folosind comanda create-react-app.
npx crea-react-app căutare-bar
În App.js fișier, adăugați elementul de formular, inclusiv eticheta de intrare:
exportMod implicitfuncţieApp() {
întoarcere (
<div>
<formă>
<tip de intrare="căutare"/>
</form>
</div>
)
}
Ar trebui să utilizați useStateCârlig de reacție si cu privire la schimbările eveniment pentru a controla intrarea. Deci, importați useState și modificați intrarea pentru a utiliza valoarea de stare:
import { useState } din "Reacţiona"
exportMod implicitfuncţieApp() {
const [interogare, setquery] = useState('')
const handleChange = (e) => {
setquery(e.ţintă.valoare)
}
întoarcere (
<div>
<formă>
<tip de intrare="căutare" value={query} onChange={handleChange}/>
</form>
</div>
)
}
De fiecare dată când un utilizator tasta ceva în interiorul elementului de intrare, handleChange actualizează starea.
Filtrarea datelor la modificarea intrării
Bara de căutare ar trebui să declanșeze o căutare folosind interogarea furnizată de utilizator. Aceasta înseamnă că ar trebui să filtrați datele din funcția handleChange. De asemenea, ar trebui să urmăriți datele filtrate în stat.
Mai întâi, modificați starea pentru a include datele:
const [state, setstate] = useState({
interogare: '',
listă: []
})
Gruparea valorilor de stat astfel, în loc să creeze una pentru fiecare valoare, reduce numărul de randări, îmbunătățind performanța.
Datele pe care le filtrați pot fi orice pe care doriți să efectuați o căutare. De exemplu, puteți crea o listă de eșantion de postări de blog precum aceasta:
const postări = [
{
url: '',
Etichete: ['reacţiona', 'blog'],
titlu: „Cum să crea o reacție căutare bar',
},
{
url:'',
Etichete: ['nodul','expres'],
titlu: 'Cum să batem joc de date API în Node',
},
// mai multe date aici
]
Poti de asemenea preluați datele folosind un API dintr-un CDN sau dintr-o bază de date.
Apoi, modificați funcția handleChange() pentru a filtra datele ori de câte ori utilizatorul tasta în interiorul intrării.
const handleChange = (e) => {
const rezultate = posts.filter (post => {
dacă (e.valoare.țintă "") returnează posturi
întoarcerepost.titlu.laLowerCase().cuprinde(e.ţintă.valoare.laLowerCase())
})
setstate({
interogare: e.ţintă.valoare,
listă: rezultate
})
}
Funcția returnează postările fără a căuta prin ele dacă interogarea este goală. Dacă un utilizator a tastat o interogare, acesta verifică dacă titlul postării include textul interogării. Convertirea titlului postării și a interogării în litere mici asigură că comparația nu face distincție între majuscule și minuscule.
Odată ce metoda de filtrare returnează rezultatele, funcția handleChange actualizează starea cu textul interogării și datele filtrate.
Afișarea rezultatelor căutării
Afișarea rezultatelor căutării implică trecerea în buclă peste matricea listei folosind Hartă metoda și afișarea datelor pentru fiecare articol.
exportMod implicitfuncţieApp() {
// stare și funcția handleChange().
întoarcere (
<div>
<formă>
<input onChange={handleChange} value={state.query} type="căutare"/>
</form>
<ul>
{(stare.interogare ''? "": state.list.map (post => {
întoarcere <cheie li={post.title}>{post.title}</li>
}))}
</ul>
</div>
)
}
În interiorul etichetei ul, componenta verifică dacă interogarea este goală. Dacă este, afișează un șir gol, deoarece înseamnă că utilizatorul nu a căutat nimic. Dacă doriți să căutați într-o listă de articole pe care o afișați deja, eliminați această bifare.
Dacă interogarea nu este goală, metoda hărții iterează peste rezultatele căutării și afișează titlurile postărilor.
De asemenea, puteți adăuga o verificare care afișează un mesaj util dacă căutarea nu returnează niciun rezultat.
<ul>
{(stare.interogare ''? "Nicio postare nu corespunde interogării": !state.list.lungime? "Interogarea dvs. nu a returnat niciun rezultat": state.list.map (post => {
întoarcere <cheie li={post.title}>{post.title}</li>
}))}
</ul>
Adăugarea acestui mesaj îmbunătățește experiența utilizatorului, deoarece utilizatorul nu este lăsat să se uite la un spațiu gol.
Gestionarea mai multor parametru de căutare
Puteți utiliza starea și cârligele React, împreună cu evenimente JavaScript, pentru a crea un element de căutare personalizat care filtrează o matrice de date.
Funcția de filtru verifică doar dacă interogarea se potrivește cu o proprietate — titlul — din obiectele din interiorul matricei. Puteți îmbunătăți funcționalitatea de căutare folosind operatorul logic OR pentru a potrivi interogarea cu alte proprietăți din obiect.
