Sökfält är ett utmärkt sätt att hjälpa användare att hitta det de behöver på din webbplats. De är också bra för analys om du håller koll på vad dina besökare söker efter.
Du kan använda React för att bygga ett sökfält som filtrerar och visar data när användaren skriver. Med React hooks och JavaScript-kartan och filteruppsättningsmetoderna är slutresultatet en responsiv, funktionell sökruta.
Skapar sökfältet
Sökningen tar input från en användare och utlöser filtreringsfunktionen. Du kan använd ett bibliotek som Formik för att skapa formulär i React, men du kan också skapa ett sökfält från början.
Om du inte har ett React-projekt och vill följa med, skapa ett med kommandot create-react-app.
npx skapa-reagera-app Sök-bar
I den App.js fil, lägg till formulärelementet, inklusive inmatningstaggen:
exporterastandardfungeraApp() {
lämna tillbaka (
<div>
<form>
<ingångstyp="Sök"/>
</form>
</div>
)
}
Du bör använda useStateReagera krok och den på Ändra händelse för att styra ingången. Så, importera useState och ändra indata för att använda tillståndsvärdet:
importera { useState } från "Reagera"
exporterastandardfungeraApp() {
const [query, setquery] = useState('')
konst handleChange = (e) => {
setquery(e.mål.värde)
}
lämna tillbaka (
<div>
<form>
<ingångstyp="Sök" value={query} onChange={handleChange}/>
</form>
</div>
)
}
Varje gång en användare skriver något i inmatningselementet, handtag Ändra uppdaterar staten.
Filtrera data vid ingångsändring
Sökfältet bör utlösa en sökning med hjälp av sökfrågan som användaren tillhandahåller. Det betyder att du bör filtrera data inuti handleChange-funktionen. Du bör också hålla reda på den filtrerade informationen i staten.
Ändra först tillståndet för att inkludera data:
konst [state, setstate] = useState({
fråga: '',
lista: []
})
Att bunta tillståndsvärdena så här, istället för att skapa ett för varje värde, minskar antalet renderingar, vilket förbättrar prestandan.
Datan du filtrerar kan vara vad som helst du vill göra en sökning på. Du kan till exempel skapa en lista med exempel på blogginlägg som det här:
konst inlägg = [
{
url: '',
taggar: ['reagera', 'blogg'],
titel: 'Hur man skapa en reaktion Sök bar',
},
{
url:'',
taggar: ['nod','uttrycka'],
titel: 'Hur man hånar api-data i Node',
},
// mer data här
]
Du kan också hämta data med hjälp av ett API från ett CDN eller en databas.
Ändra sedan handleChange()-funktionen för att filtrera data närhelst användaren skriver i inmatningen.
konst handleChange = (e) => {
konst resultat = posts.filter (post => {
if (e.target.value "") returnera inlägg
lämna tillbakaposta.titel.toLowerCase().inkluderar(e.mål.värde.toLowerCase())
})
setstate({
fråga: e.mål.värde,
lista: resultat
})
}
Funktionen returnerar inläggen utan att söka igenom dem om frågan är tom. Om en användare har skrivit en fråga kontrollerar den om inläggets titel innehåller frågetexten. Genom att konvertera inläggets rubrik och frågan till gemener säkerställs att jämförelsen är skiftlägesokänslig.
När filtermetoden returnerar resultaten uppdaterar handleChange-funktionen statusen med frågetexten och filtrerad data.
Visar sökresultaten
Att visa sökresultaten innebär att loopa över listarrayen med hjälp av Karta metod och visa data för varje objekt.
exporterastandardfungeraApp() {
// state och handleChange() funktion
lämna tillbaka (
<div>
<form>
<input onChange={handleChange} värde={state.query} typ="Sök"/>
</form>
<ul>
{(state.query ''? "": state.list.map (post => {
lämna tillbaka <li key={post.title}>{Post titel}</li>
}))}
</ul>
</div>
)
}
Inuti ul-taggen kontrollerar komponenten om frågan är tom. Om det är det, visar den en tom sträng eftersom det betyder att användaren inte har sökt efter någonting. Om du vill söka igenom en lista med objekt som du redan visar, ta bort den här kryssrutan.
Om frågan inte är tom, itererar kartmetoden över sökresultaten och listar inläggets titlar.
Du kan också lägga till en bock som visar ett användbart meddelande om sökningen inte ger några resultat.
<ul>
{(state.query ''? "Inga inlägg matchar frågan": !stat.lista.längd? "Din fråga gav inga resultat": state.list.map (post => {
lämna tillbaka <li key={post.title}>{Post titel}</li>
}))}
</ul>
Att lägga till det här meddelandet förbättrar användarupplevelsen eftersom användaren inte lämnas att titta på ett tomt utrymme.
Hanterar mer än en gång sökparameter
Du kan använda React state och hooks, tillsammans med JavaScript-händelser, för att skapa ett anpassat sökelement som filtrerar en dataarray.
Filterfunktionen kontrollerar bara om frågan matchar en egenskap – titel – i objekten i arrayen. Du kan förbättra sökfunktionen genom att använda den logiska OR-operatorn för att matcha frågan med andra egenskaper i objektet.