Zoekbalken zijn een geweldige manier om gebruikers te helpen vinden wat ze nodig hebben op uw website. Ze zijn ook goed voor analyses als u bijhoudt waar uw bezoekers naar zoeken.
U kunt React gebruiken om een zoekbalk te bouwen die gegevens filtert en weergeeft terwijl de gebruiker typt. Met React-hooks en de JavaScript-kaart- en filterarray-methoden is het eindresultaat een responsief, functioneel zoekvak.
De zoekbalk maken
De zoekopdracht neemt input van een gebruiker en activeert de filterfunctie. Jij kan gebruik een bibliotheek zoals Formik om formulieren in React te maken, maar u kunt ook een geheel nieuwe zoekbalk maken.
Als je geen React-project hebt en mee wilt doen, maak er dan een aan met de opdracht create-react-app.
npx creëren-reageer-app zoekopdracht-bar
In de App.js bestand, voeg het formulierelement toe, inclusief de invoertag:
exporterenstandaardfunctieapp() {
opbrengst (
<div>
<formulier>
<invoertype="zoekopdracht"/>
</form>
</div>
)
}
U dient de gebruikStateReageer haak en de opWijzigen
evenement om de invoer te regelen. Importeer dus useState en wijzig de invoer om de statuswaarde te gebruiken:importeren { useState } van "Reageer"
exporterenstandaardfunctieapp() {
const [query, setquery] = useState('')
const handleChange = (e) => {
stelzoekopdracht(e.doel.waarde)
}
opbrengst (
<div>
<formulier>
<invoertype="zoekopdracht" waarde={query} onChange={handleChange}/>
</form>
</div>
)
}
Elke keer dat een gebruiker iets typt in het invoerelement, omgaanWijzigen werkt de staat bij.
Filteren van de gegevens bij invoerwijziging
De zoekbalk moet een zoekopdracht activeren met behulp van de zoekopdracht die de gebruiker opgeeft. Dit betekent dat u de gegevens binnen de functie handleChange moet filteren. U moet ook de gefilterde gegevens in de staat bijhouden.
Pas eerst de status aan om de gegevens op te nemen:
const [state, setstate] = useState({
vraag: '',
lijst: []
})
Door de statuswaarden op deze manier te bundelen, in plaats van er één voor elke waarde te maken, wordt het aantal weergaven verminderd, waardoor de prestaties verbeteren.
De gegevens die u filtert, kunnen alles zijn waarop u een zoekopdracht wilt uitvoeren. U kunt bijvoorbeeld een lijst met voorbeeldblogberichten maken, zoals deze:
const berichten = [
{
url: '',
labels: ['Reageer', 'bloggen'],
titel: 'Hoe creëren een reactie zoekopdracht bar',
},
{
url:'',
labels: ['knooppunt','nadrukkelijk'],
titel: 'Hoe api-gegevens in Node te bespotten',
},
// meer gegevens hier
]
Je kan ook haal de gegevens op met behulp van een API van een CDN of een database.
Pas vervolgens de functie handleChange() aan om de gegevens te filteren wanneer de gebruiker in de invoer typt.
const handleChange = (e) => {
const resultaten = posts.filter (post => {
als (e.doelwaarde "") berichten retourneren
opbrengstna.titel.naar kleine letters().omvat(e.doel.waarde.naar kleine letters())
})
setstate({
vraag: e.doel.waarde,
lijst: resultaten
})
}
De functie retourneert de berichten zonder ze te doorzoeken als de zoekopdracht leeg is. Als een gebruiker een vraag heeft getypt, wordt gecontroleerd of de titel van het bericht de vraagtekst bevat. Door de titel van het bericht en de zoekopdracht om te zetten in kleine letters, is de vergelijking niet hoofdlettergevoelig.
Zodra de filtermethode de resultaten retourneert, werkt de functie handleChange de status bij met de querytekst en de gefilterde gegevens.
De zoekresultaten weergeven
Het weergeven van de zoekresultaten omvat het doorlopen van de lijstarray met behulp van de kaart methode en weergave van de gegevens voor elk item.
exporterenstandaardfunctieapp() {
// state en handleChange() functie
opbrengst (
<div>
<formulier>
<input onChange={handleChange} waarde={state.query} type="zoekopdracht"/>
</form>
<ul>
{(status.query ''? "": state.list.map (post => {
opbrengst <li key={post.title}>{post.titel}</li>
}))}
</ul>
</div>
)
}
Binnen de ul-tag controleert de component of de query leeg is. Als dat zo is, wordt er een lege tekenreeks weergegeven, omdat dit betekent dat de gebruiker nergens naar heeft gezocht. Als u wilt zoeken in een lijst met items die u al weergeeft, verwijdert u dit vinkje.
Als de zoekopdracht niet leeg is, herhaalt de kaartmethode de zoekresultaten en geeft de berichttitels weer.
U kunt ook een vinkje toevoegen dat een nuttig bericht weergeeft als de zoekopdracht geen resultaten oplevert.
<ul>
{(status.query ''? "Er komen geen berichten overeen met de zoekopdracht": !staat.lijst.lengte? "Uw zoekopdracht heeft geen resultaten opgeleverd": state.list.map (post => {
opbrengst <li key={post.title}>{post.titel}</li>
}))}
</ul>
Het toevoegen van dit bericht verbetert de gebruikerservaring omdat de gebruiker niet naar een lege ruimte blijft kijken.
Afhandelen van meer dan eens zoekparameter
U kunt React-status en hooks, samen met JavaScript-gebeurtenissen, gebruiken om een aangepast zoekelement te maken dat een gegevensarray filtert.
De filterfunctie controleert alleen of de query overeenkomt met één eigenschap (titel) in de objecten in de array. U kunt de zoekfunctionaliteit verbeteren door de logische OR-operator te gebruiken om de query af te stemmen op andere eigenschappen in het object.
