Vyhľadávacie panely sú skvelým spôsobom, ako pomôcť používateľom nájsť na vašom webe to, čo potrebujú. Sú tiež dobré na analýzu, ak sledujete, čo vaši návštevníci hľadajú.
React môžete použiť na vytvorenie vyhľadávacieho panela, ktorý filtruje a zobrazuje údaje podľa toho, ako používateľ píše. Vďaka hákom React a metódam mapy JavaScript a poľa filtrov je konečným výsledkom responzívne funkčné vyhľadávacie pole.
Vytvorenie vyhľadávacieho panela
Vyhľadávanie prevezme vstup od používateľa a spustí funkciu filtrovania. Môžeš použite knižnicu ako Formik na vytváranie formulárov v Reacte, ale môžete tiež vytvoriť panel vyhľadávania úplne od začiatku.
Ak nemáte projekt React a chcete ho nasledovať, vytvorte si ho pomocou príkazu create-react-app.
npx vytvoriť-reagovať-aplikácia Vyhľadávanie-bar
V App.js súbor, pridajte prvok formulára vrátane vstupnej značky:
exportpredvolenáfunkciuApp() {
vrátiť (
<div>
<formulár>
<typ vstupu ="Vyhľadávanie"/>
</form>
</div>
)
}
Mali by ste použiť useStateReagovať hák a pri zmene
udalosť na ovládanie vstupu. Takže importujte useState a upravte vstup tak, aby používal hodnotu stavu:importovať { useState } od "Reagovať"
exportpredvolenáfunkciuApp() {
const [query, setquery] = useState('')
konšt handleChange = (e) => {
setquery(e.cieľ.hodnota)
}
vrátiť (
<div>
<formulár>
<typ vstupu ="Vyhľadávanie" value={query} onChange={handleChange}/>
</form>
</div>
)
}
Zakaždým, keď používateľ zadá niečo do vstupného prvku, rukoväťZmeniť aktualizuje stav.
Filtrovanie údajov o zmene vstupu
Vyhľadávací panel by mal spustiť vyhľadávanie pomocou dopytu, ktorý zadá používateľ. To znamená, že by ste mali filtrovať údaje vo funkcii handleChange. Mali by ste tiež sledovať filtrované údaje v stave.
Najprv upravte stav tak, aby zahŕňal údaje:
konšt [state, setstate] = useState({
dopyt: '',
zoznam: []
})
Spájanie hodnôt stavu, ako je toto, namiesto vytvárania jednej pre každú hodnotu, znižuje počet vykreslení a zlepšuje výkon.
Údaje, ktoré filtrujete, môžu byť čokoľvek, na čom chcete vykonať vyhľadávanie. Môžete si napríklad vytvoriť zoznam vzorových blogových príspevkov, ako je tento:
konšt príspevky = [
{
url: '',
značky: ['reagovať', 'blog'],
názov: 'Ako na to vytvoriť reakcia Vyhľadávanie bar',
},
{
url:'',
značky: ['uzol','expresné'],
názov: 'Ako zosmiešňovať údaje API v Node',
},
// viac údajov tu
]
Môžete tiež získať údaje pomocou rozhrania API z CDN alebo databázy.
Ďalej upravte funkciu handleChange() na filtrovanie údajov vždy, keď používateľ napíše do vstupu.
konšt handleChange = (e) => {
konšt výsledky = posts.filter (post => {
ak (e.cieľová.hodnota "") vrátiť príspevky
vrátiťpríspevok.názov.na malé písmená().zahŕňa(e.cieľ.hodnota.na malé písmená())
})
setstate({
dopyt: e.cieľ.hodnota,
zoznam: výsledky
})
}
Ak je dopyt prázdny, funkcia vráti príspevky bez toho, aby ich prehľadávala. Ak používateľ zadal dopyt, skontroluje, či názov príspevku obsahuje text dopytu. Konverzia názvu príspevku a dopytu na malé písmená zaisťuje, že porovnanie nerozlišuje veľké a malé písmená.
Keď metóda filtra vráti výsledky, funkcia handleChange aktualizuje stav textom dotazu a filtrovanými údajmi.
Zobrazenie výsledkov vyhľadávania
Zobrazenie výsledkov vyhľadávania zahŕňa cyklické prechádzanie cez pole zoznamu pomocou mapa a zobrazenie údajov pre každú položku.
exportpredvolenáfunkciuApp() {
// stav a funkcia handleChange().
vrátiť (
<div>
<formulár>
<input onChange={handleChange} value={state.query} type="Vyhľadávanie"/>
</form>
<ul>
{(state.query ''? "": state.list.map (príspevok => {
vrátiť <li key={post.title}>{post.title}</li>
}))}
</ul>
</div>
)
}
Vo vnútri značky ul komponent kontroluje, či je dopyt prázdny. Ak áno, zobrazí sa prázdny reťazec, pretože to znamená, že používateľ nič nehľadal. Ak chcete prehľadávať zoznam položiek, ktoré už zobrazujete, zrušte začiarknutie.
Ak dopyt nie je prázdny, metóda mapy iteruje výsledky vyhľadávania a uvádza názvy príspevkov.
Môžete tiež pridať zaškrtnutie, ktoré zobrazí užitočnú správu, ak vyhľadávanie nevráti žiadne výsledky.
<ul>
{(state.query ''? "Dotazu nezodpovedajú žiadne príspevky": !dĺžka.zoznamu štátu? "Váš dopyt nevrátil žiadne výsledky": state.list.map (príspevok => {
vrátiť <li key={post.title}>{post.title}</li>
}))}
</ul>
Pridanie tejto správy zlepšuje používateľskú skúsenosť, pretože používateľ nezostane pri pohľade na prázdne miesto.
Spracovanie viac ako raz vyhľadávacieho parametra
Stav React a háčiky spolu s udalosťami JavaScript môžete použiť na vytvorenie vlastného vyhľadávacieho prvku, ktorý filtruje pole údajov.
Funkcia filtrovania skontroluje iba to, či sa dotaz zhoduje s jednou vlastnosťou – názvom – v objektoch v poli. Funkciu vyhľadávania môžete zlepšiť použitím logického operátora OR na priradenie dotazu k iným vlastnostiam v objekte.