Le barre di ricerca sono un ottimo modo per aiutare gli utenti a trovare ciò di cui hanno bisogno sul tuo sito web. Sono utili anche per l'analisi se tieni traccia di ciò che i tuoi visitatori stanno cercando.
Puoi utilizzare React per creare una barra di ricerca che filtri e visualizzi i dati mentre l'utente digita. Con gli hook React e i metodi JavaScript map e filter array, il risultato finale è una casella di ricerca reattiva e funzionale.
Creazione della barra di ricerca
La ricerca prenderà input da un utente e attiverà la funzione di filtro. Puoi usa una libreria come Formik per creare moduli in React, ma puoi anche creare una barra di ricerca da zero.
Se non hai un progetto React e vuoi seguirlo, creane uno usando il comando create-react-app.
npx creare-react-app ricerca-sbarra
Nel App.js file, aggiungi l'elemento form, incluso il tag di input:
esportarepredefinitofunzioneApp() {
ritorno (
<div>
<modulo>
<tipo di input="ricerca"/>
</form>
</div>
)
}
Dovresti usare il useStateAggancio di reazione
e il onChange evento per controllare l'ingresso. Quindi, importa useState e modifica l'input per utilizzare il valore di stato:importare { usaStato } da "Reagire"
esportarepredefinitofunzioneApp() {
const [query, setquery] = useState('')
cost handleChange = (e) => {
setquery(e.bersaglio.valore)
}
ritorno (
<div>
<modulo>
<tipo di input="ricerca" valore={query} onChange={handleChange}/>
</form>
</div>
)
}
Ogni volta che un utente digita qualcosa all'interno dell'elemento input, handleChange aggiorna lo stato.
Filtraggio dei dati sulla modifica dell'input
La barra di ricerca dovrebbe attivare una ricerca utilizzando la query fornita dall'utente. Ciò significa che dovresti filtrare i dati all'interno della funzione handleChange. Dovresti anche tenere traccia dei dati filtrati nello stato.
Innanzitutto, modifica lo stato per includere i dati:
cost [state, setstate] = useState({
domanda: '',
elenco: []
})
Raggruppare i valori di stato in questo modo, invece di crearne uno per ogni valore, riduce il numero di rendering, migliorando le prestazioni.
I dati che filtri possono essere qualsiasi cosa su cui desideri eseguire una ricerca. Ad esempio, puoi creare un elenco di post di blog di esempio come questo:
cost messaggi = [
{
URL: '',
tag: ['reagire', 'blog'],
titolo: 'Come creare una reazione ricerca sbarra',
},
{
URL:'',
tag: ['nodo','esprimere'],
titolo: 'Come simulare i dati API in Node',
},
// più dati qui
]
Puoi anche recuperare i dati utilizzando un'API da un CDN o da un database.
Successivamente, modifica la funzione handleChange() per filtrare i dati ogni volta che l'utente digita all'interno dell'input.
cost handleChange = (e) => {
cost risultati = posts.filter (post => {
if (e.target.value "") restituire post
ritornoinviare.titolo.toLowerCase().include(e.bersaglio.valore.toLowerCase())
})
setstato({
domanda: e.bersaglio.valore,
elenco: risultati
})
}
La funzione restituisce i post senza cercarli se la query è vuota. Se un utente ha digitato una query, controlla se il titolo del post include il testo della query. La conversione del titolo del post e della query in minuscolo garantisce che il confronto non faccia distinzione tra maiuscole e minuscole.
Una volta che il metodo filter restituisce i risultati, la funzione handleChange aggiorna lo stato con il testo della query ei dati filtrati.
Visualizzazione dei risultati della ricerca
La visualizzazione dei risultati della ricerca comporta il looping sull'array di elenco utilizzando il file carta geografica metodo e visualizzare i dati per ogni elemento.
esportarepredefinitofunzioneApp() {
// funzione stato e handleChange()
ritorno (
<div>
<modulo>
<input onChange={handleChange} value={state.query} type="ricerca"/>
</form>
<Ul>
{(stato.query ''? "": state.list.map (post => {
ritorno <chiave li={post.title}>{titolo del post}</li>
}))}
</ul>
</div>
)
}
All'interno del tag ul, il componente controlla se la query è vuota. Se lo è, visualizza una stringa vuota perché significa che l'utente non ha cercato nulla. Se vuoi cercare in un elenco di elementi che stai già visualizzando, rimuovi questo segno di spunta.
Se la query non è vuota, il metodo map itera sui risultati della ricerca ed elenca i titoli dei post.
Puoi anche aggiungere un segno di spunta che visualizzi un messaggio utile se la ricerca non restituisce risultati.
<Ul>
{(stato.query ''? "Nessun post corrisponde alla query": !state.list.length? "La tua query non ha prodotto alcun risultato": state.list.map (post => {
ritorno <chiave li={post.title}>{titolo del post}</li>
}))}
</ul>
L'aggiunta di questo messaggio migliora l'esperienza dell'utente perché l'utente non viene lasciato a guardare uno spazio vuoto.
Gestione di più parametri di ricerca
Puoi utilizzare lo stato React e gli hook, insieme agli eventi JavaScript, per creare un elemento di ricerca personalizzato che filtri un array di dati.
La funzione filtro controlla solo se la query corrisponde a una proprietà, titolo, negli oggetti all'interno dell'array. È possibile migliorare la funzionalità di ricerca utilizzando l'operatore OR logico per far corrispondere la query ad altre proprietà nell'oggetto.
