A keresési eredmények szűrése a React használatával történő gépelés közben

A keresősávok nagyszerű módja annak, hogy a felhasználók megtalálják, amire szükségük van az Ön webhelyén. Analitikai célokra is jók, ha nyomon követi, mit keresnek látogatói.

A React segítségével létrehozhat egy keresősávot, amely szűri és megjeleníti az adatokat, amikor a felhasználó gépel. A React hook-okkal és a JavaScript térkép- és szűrőtömb módszerekkel a végeredmény egy reszponzív, funkcionális keresőmező.

MAKEUSEOF A NAP VIDEÓJA

A keresősáv létrehozása

A keresés a felhasználótól veszi a bemenetet, és elindítja a szűrési funkciót. tudsz használjon olyan könyvtárat, mint a Formik, hogy űrlapokat hozzon létre a Reactban , de a semmiből is létrehozhat keresősávot.

Ha nincs React projektje, és követni szeretné, hozzon létre egyet a create-react-app paranccsal.

npx create-react-app search-bar

Ban,-ben App.js fájl, adja hozzá az űrlapelemet, beleértve a bemeneti címkét:

export default function App() { 
   return ( 
    <div> 
        <form> 
          <input type="search"/> 
        </form> 
    </div> 
  ) 
}

Használnia kell a useState Reagálás horog és a onChange esemény a bemenet vezérléséhez. Tehát importálja a useState-et, és módosítsa a bemenetet az állapotérték használatához:

import { useState } from "React" 
export default function App() { 
     const [query, setquery] = useState('') 
     const handleChange = (e) => { 
       setquery(e.target.value) 
     } 
     return ( 
      <div> 
          <form> 
            <input type="search" value={query} onChange={handleChange}/> 
          </form> 
      </div> 
    ) 
  }

Minden alkalommal, amikor a felhasználó beír valamit a beviteli elembe, fogantyúChange frissíti az állapotot.

Adatok szűrése a bemeneti változásnál

A keresősávnak keresést kell indítania a felhasználó által megadott lekérdezéssel. Ez azt jelenti, hogy szűrnie kell az adatokat a handleChange függvényen belül. Nyomon kell követnie a szűrt adatokat is az állapotban.

Először módosítsa az állapotot az adatokkal:

const [state, setstate] = useState({ 
  query: '', 
  list: [] 
})

Az állapotértékek ilyen kötegelése ahelyett, hogy minden értékhez hozna létre egyet, csökkenti a megjelenítések számát, javítva a teljesítményt.

Az xbox one nem fog csatlakozni a routerhez

A szűrt adatok bármilyenek lehetnek, amelyeken keresést szeretne végezni. Létrehozhat például egy listát a mintablogbejegyzésekből, mint ez:

const posts = [ 
    {   
      url: '', 
      tags: ['react', 'blog'], 
      title: 'How to create a react search bar', 
    }, 
    { 
      url:'', 
      tags: ['node','express'], 
      title: 'How to mock api data in Node', 
    }, 
    // more data here 
  ]

Te is lekérni az adatokat egy API segítségével CDN-ből vagy adatbázisból.

Ezután módosítsa a handleChange() függvényt az adatok szűréséhez, amikor a felhasználó a bemeneten belül gépel.

const handleChange = (e) => { 
    const results = posts.filter(post => { 
        if (e.target.value === "") return posts 
        return post.title.toLowerCase().includes(e.target.value.toLowerCase()) 
    }) 
    setstate({ 
        query: e.target.value, 
        list: results 
    }) 
}

A függvény keresés nélkül adja vissza a bejegyzéseket, ha a lekérdezés üres. Ha a felhasználó beírt egy lekérdezést, akkor ellenőrzi, hogy a bejegyzés címe tartalmazza-e a lekérdezés szövegét. A bejegyzés címének és a lekérdezésnek kisbetűssé alakítása biztosítja, hogy az összehasonlításban a kis- és nagybetűk ne legyenek megkülönböztetve.

Miután a szűrőmódszer visszaadja az eredményeket, a handleChange függvény frissíti az állapotot a lekérdezés szövegével és a szűrt adatokkal.

A keresési eredmények megjelenítése

A keresési eredmények megjelenítése magában foglalja a listatömb áthurkolását a térkép módszert és az egyes tételekhez tartozó adatok megjelenítését.

export default function App() { 
// state and handleChange() function 
   return ( 
    <div> 
        <form> 
          <input onChange={handleChange} value={state.query} type="search"/> 
        </form> 
        <ul> 
          {(state.query === '' ? "" : state.list.map(post => { 
            return <li key={post.title}>{post.title}</li> 
          }))} 
        </ul> 
    </div> 
  ) 
}

Az ul címkén belül az összetevő ellenőrzi, hogy a lekérdezés üres-e. Ha igen, akkor üres karakterláncot jelenít meg, mert ez azt jelenti, hogy a felhasználó nem keresett semmit. Ha a már megjelenített elemek listájában szeretne keresni, távolítsa el ezt a pipát.

Ha a lekérdezés nem üres, a térképmódszer a keresési eredmények között iterál, és felsorolja a bejegyzések címeit.

Hozzáadhat egy pipát is, amely hasznos üzenetet jelenít meg, ha a keresés nem ad eredményt.

<ul> 
  {(state.query === '' ? "No posts match the query" : !state.list.length ? "Your query did not return any results" : state.list.map(post => { 
    return <li key={post.title}>{post.title}</li> 
  }))} 
</ul>

Ennek az üzenetnek a hozzáadása javítja a felhasználói élményt, mert a felhasználó nem marad üres helyen.

Többszöri keresési paraméter kezelése

A React állapot és a hook segítségével JavaScript-eseményekkel együtt egyéni keresési elemet hozhat létre, amely egy adattömböt szűr.

A szűrő funkció csak azt ellenőrzi, hogy a lekérdezés egyezik-e a tömbben lévő objektumok egyik tulajdonságával – a címmel. Javíthatja a keresési funkciókat, ha a logikai VAGY operátort használja, hogy a lekérdezést az objektum más tulajdonságaival párosítsa.