Hakupalkit ovat loistava tapa auttaa käyttäjiä löytämään tarvitsemansa verkkosivustoltasi. Ne ovat myös hyviä analytiikkaan, jos pidät kirjaa siitä, mitä vierailijasi etsivät.

Reactin avulla voit rakentaa hakupalkin, joka suodattaa ja näyttää tietoja käyttäjän kirjoittaessa. React-koukkujen ja JavaScript-kartta- ja suodatintaulukkomenetelmien ansiosta lopputuloksena on responsiivinen, toimiva hakukenttä.

Hakupalkin luominen

Haku ottaa syötteen käyttäjältä ja käynnistää suodatustoiminnon. Sinä pystyt käytä Formikin kaltaista kirjastoa lomakkeiden luomiseen Reactissa, mutta voit myös luoda hakupalkin tyhjästä.

Jos sinulla ei ole React-projektia ja haluat seurata sitä, luo sellainen komennolla create-react-app.

npx luoda-react-sovellus Hae-baari

Vuonna App.js tiedosto, lisää lomakeelementti, mukaan lukien syöttötagi:

viedäoletuksenatoimintoSovellus() {
palata (
<div>
<muodossa>
<syöttötyyppi="Hae"/>
</form>
</div>
 )
}

Sinun tulisi käyttää useStateReaktiokoukku ja onChange tapahtuma ohjaamaan tuloa. Joten tuo useState ja muokkaa syötettä käyttämään tila-arvoa:

instagram viewer 
tuonti { useState } alkaen "Reagoi"
viedäoletuksenatoimintoSovellus() {
 const [kysely, setquery] = useState('')
konst HandChange = (e) => {
kysely(e.kohde.arvo)
 }
palata (
<div>
<muodossa>
<syöttötyyppi="Hae" value={query} onChange={handleChange}/>
</form>
</div>
 )
 }

Aina kun käyttäjä kirjoittaa jotain syöttöelementin sisään, kahvaVaihda päivittää tilaa.

Tietojen suodattaminen syötteen muutoksen yhteydessä

Hakupalkin pitäisi käynnistää haku käyttämällä käyttäjän antamaa kyselyä. Tämä tarkoittaa, että sinun tulee suodattaa tiedot handleChange-funktion sisällä. Sinun tulee myös seurata tilassa olevia suodatettuja tietoja.

Muokkaa ensin tilaa niin, että se sisältää tiedot:

konst [state, setstate] = useState({
 kysely: '',
lista: []
})

Tila-arvojen niputtaminen tällä tavalla sen sijaan, että luotaisiin yksi jokaiselle arvolle, vähentää renderöintien määrää ja parantaa suorituskykyä.

Suodattamasi tiedot voivat olla mitä tahansa, jolle haluat tehdä haun. Voit esimerkiksi luoda luettelon esimerkkiblogiviesteistä, kuten tämä:

konst viestit = [
 { 
 url: '',
 tunnisteet: ['reagoida', 'blogi'],
 otsikko: "Kuinka luoda reaktio Hae baari',
 },
 {
 url:'',
 tunnisteet: ['solmu','ilmaista'],
 otsikko: 'Api-tietojen pilkkaaminen Nodessa',
 },
// täällä lisää tietoa
 ]

Voit myös noutaa tiedot API: n avulla CDN: stä tai tietokannasta.

Muokkaa seuraavaksi handleChange()-funktiota suodattamaan tiedot aina, kun käyttäjä kirjoittaa syötteeseen.

konst HandChange = (e) => {
konst tulokset = posts.filter (post => {
 jos (e.target.value "") palauttaa viestit
palatalähettää.title.toLowerCase().sisältää(e.kohde.arvo.toLowerCase())
 })
 setstate({
kysely: e.kohde.arvo,
lista: tulokset
 })
}

Funktio palauttaa viestit etsimättä niitä, jos kysely on tyhjä. Jos käyttäjä on kirjoittanut kyselyn, se tarkistaa, sisältääkö viestin otsikko kyselyn tekstiä. Viestin otsikon ja kyselyn muuntaminen pieniksi kirjaimiksi varmistaa, että vertailussa kirjainkoolla ei ole merkitystä.

Kun suodatusmenetelmä palauttaa tulokset, handleChange-funktio päivittää tilan kyselytekstillä ja suodatetuilla tiedoilla.

Hakutulosten näyttäminen

Hakutulosten näyttämiseen liittyy silmukoita luettelotaulukon yli käyttämällä kartta menetelmä ja kunkin kohteen tietojen näyttäminen.

viedäoletuksenatoimintoSovellus() {
// tila ja handleChange()-funktio
palata (
<div>
<muodossa>
<input onChange={handleChange} value={state.query} type="Hae"/>
</form>
<ul>
 {(state.query ''? "": state.list.map (post => {
 palata <li key={post.title}>{post.title}</li>
 }))}
</ul>
</div>
 )
}

ul-tunnisteen sisällä komponentti tarkistaa, onko kysely tyhjä. Jos on, se näyttää tyhjän merkkijonon, koska se tarkoittaa, että käyttäjä ei ole etsinyt mitään. Jos haluat etsiä jo näytettävien kohteiden luettelosta, poista tämä valintamerkki.

Jos kysely ei ole tyhjä, karttamenetelmä toistuu hakutuloksissa ja luettelee viestien otsikot.

Voit myös lisätä valintamerkin, joka näyttää hyödyllisen viestin, jos haku ei tuota tuloksia.

<ul>
 {(state.query ''? "Yksikään viesti ei vastaa kyselyä": !state.list.length? "Kyselysi ei tuottanut tulosta": state.list.map (post => {
 palata <li key={post.title}>{post.title}</li>
 }))}
</ul>

Tämän viestin lisääminen parantaa käyttökokemusta, koska käyttäjä ei jää katsomaan tyhjää kohtaa.

Useamman kuin kerran hakuparametrin käsittely

Voit käyttää React-tilaa ja koukkuja yhdessä JavaScript-tapahtumien kanssa luodaksesi mukautetun hakuelementin, joka suodattaa tietojoukon.

Suodatintoiminto tarkistaa vain, vastaako kysely yhtä ominaisuutta – otsikkoa – taulukon sisällä olevissa objekteissa. Voit parantaa hakutoimintoa käyttämällä loogista OR-operaattoria kohdistaaksesi kyselyn muihin objektin ominaisuuksiin.