Траке за претрагу су одличан начин да помогнете корисницима да пронађу оно што им треба на вашој веб локацији. Такође су добри за аналитику ако пратите шта ваши посетиоци траже.
Можете да користите Реацт да направите траку за претрагу која филтрира и приказује податке као типове корисника. Са Реацт кукицама и методама ЈаваСцрипт мапе и филтерског низа, крајњи резултат је прилагодљив, функционалан оквир за претрагу.
Креирање траке за претрагу
Претрага ће узети унос од корисника и покренути функцију филтрирања. Можете користите библиотеку као што је Формик за креирање образаца у Реацт-у, али такође можете креирати траку за претрагу од нуле.
Ако немате Реацт пројекат и желите да га пратите, креирајте га помоћу команде цреате-реацт-апп.
нпк Креирај-реаговати-апликација Претрага-бар
У Апп.јс датотеку, додајте елемент обрасца, укључујући улазну ознаку:
извозУобичајенофункцијаАпликација() {
повратак (
<див>
<форму>
<тип уноса="Претрага"/>
</form>
</div>
)
}
Требало би да користите усеСтатеРеаговати кука анд тхе
онЦханге догађај за контролу уноса. Дакле, увезите усеСтате и измените унос да бисте користили вредност стања:увоз { усеСтате } из "реаговати"
извозУобичајенофункцијаАпликација() {
цонст [куери, сеткуери] = усеСтате('')
конст хандлеЦханге = (е) => {
сеткуери(е.таргет.вредност)
}
повратак (
<див>
<форму>
<тип уноса="Претрага" валуе={куери} онЦханге={хандлеЦханге}/>
</form>
</div>
)
}
Сваки пут када корисник унесе нешто унутар елемента за унос, хандлеЦханге ажурира стање.
Филтрирање података о промени уноса
Трака за претрагу треба да покрене претрагу користећи упит који корисник даје. То значи да би требало да филтрирате податке унутар функције хандлеЦханге. Такође би требало да пратите филтриране податке у стању.
Прво измените стање да бисте укључили податке:
конст [стате, сетстате] = усеСтате({
упит: '',
листа: []
})
Овакво груписање вредности стања, уместо креирања једне за сваку вредност, смањује број рендера, побољшавајући перформансе.
Подаци које филтрирате могу бити све што желите да извршите претрагу. На пример, можете да направите листу примера постова на блогу попут овог:
конст постови = [
{
урл: '',
ознаке: ['реаговати', 'блог'],
наслов: 'Како да Креирај а реаговати Претрага бар',
},
{
урл:'',
ознаке: ['чвор','изразити'],
наслов: 'Како се ругати апи подацима у Ноде-у',
},
// више података овде
]
Можете такође преузимање података помоћу АПИ-ја из ЦДН-а или базе података.
Затим модификујте функцију хандлеЦханге() да филтрира податке кад год корисник унесе у унос.
конст хандлеЦханге = (е) => {
конст резултати = постс.филтер (пост => {
ако (е.циљна.вредност "") повратне постове
повратакпошта.титле.тоЛоверЦасе().укључује(е.таргет.вредност.тоЛоверЦасе())
})
сетстате({
упит: е.таргет.вредност,
листа: резултати
})
}
Функција враћа постове без претраживања по њима ако је упит празан. Ако је корисник унео упит, он проверава да ли наслов поста садржи текст упита. Конвертовањем наслова поста и упита у мала слова осигурава се да поређење не разликује велика и мала слова.
Једном када метода филтера врати резултате, функција хандлеЦханге ажурира стање текстом упита и филтрираним подацима.
Приказ резултата претраге
Приказивање резултата претраге укључује петљу преко низа листе помоћу Мапа метода и приказивање података за сваку ставку.
извозУобичајенофункцијаАпликација() {
// функција стања и хандлеЦханге().
повратак (
<див>
<форму>
<инпут онЦханге={хандлеЦханге} валуе={стате.куери} типе="Претрага"/>
</form>
<ул>
{(стате.куери ''? "": стате.лист.мап (пост => {
повратак <ли кеи={пост.титле}>{Наслов поста}</li>
}))}
</ul>
</div>
)
}
Унутар ознаке ул, компонента проверава да ли је упит празан. Ако јесте, приказује празан стринг јер то значи да корисник није ништа тражио. Ако желите да претражите листу ставки које већ приказујете, уклоните ову потврду.
Ако упит није празан, метода мапе понавља резултате претраге и наводи наслове постова.
Такође можете додати проверу која приказује корисну поруку ако претрага не даје резултате.
<ул>
{(стате.куери ''? "Ниједна објава не одговара упиту": !стате.лист.ленгтх? "Ваш упит није дао никакве резултате": стате.лист.мап (пост => {
повратак <ли кеи={пост.титле}>{Наслов поста}</li>
}))}
</ul>
Додавање ове поруке побољшава корисничко искуство јер корисник не остаје да гледа у празан простор.
Руковање параметром претраге више од једном
Можете да користите Реацт стање и куке, заједно са ЈаваСцрипт догађајима, да креирате прилагођени елемент претраге који филтрира низ података.
Функција филтера само проверава да ли се упит подудара са једним својством — насловом — у објектима унутар низа. Функционалност претраге можете побољшати коришћењем логичког ОР оператора да бисте упарили упит са другим својствима у објекту.