Arama çubukları, kullanıcıların web sitenizde ihtiyaç duydukları şeyi bulmalarına yardımcı olmanın harika bir yoludur. Ziyaretçilerinizin ne aradığını takip ederseniz, analitik için de iyidirler.

Kullanıcı yazarken verileri filtreleyen ve görüntüleyen bir arama çubuğu oluşturmak için React'i kullanabilirsiniz. React kancaları ve JavaScript eşleme ve filtre dizisi yöntemleriyle sonuç, yanıt veren, işlevsel bir arama kutusudur.

Arama Çubuğunu Oluşturma

Arama, bir kullanıcıdan girdi alacak ve filtreleme işlevini tetikleyecektir. Yapabilirsiniz React'te formlar oluşturmak için Formik gibi bir kitaplık kullanın, ancak sıfırdan bir arama çubuğu da oluşturabilirsiniz.

Bir React projeniz yoksa ve devam etmek istiyorsanız, create-react-app komutunu kullanarak bir tane oluşturun.

npx yaratmak-react-app aramak-çubuk

İçinde Uygulama.js dosya, giriş etiketi dahil olmak üzere form öğesini ekleyin:

ihracatvarsayılanişlevUygulama() {
geri dönmek (
<div>
<biçim>
<giriş türü="aramak"/>
</form>
</div>
 )
}

kullanmalısın

instagram viewer
kullanımDevletTepki kancası ve onChange Girişi kontrol etmek için olay. Bu nedenle, useState'i içe aktarın ve durum değerini kullanmak için girişi değiştirin:

içe aktarmak { kullanımDevlet } itibaren "Tepki"
ihracatvarsayılanişlevUygulama() {
 const [sorgu, setquery] = useState('')
sabit handChange = (e) => {
setquery(e.hedef.değer)
 }
geri dönmek (
<div>
<biçim>
<giriş türü="aramak" value={query} onChange={handleChange}/>
</form>
</div>
 )
 }

Bir kullanıcı giriş öğesinin içine her şey yazdığında, koluDeğiştir durumunu günceller.

Girdi Değişikliği Üzerine Verileri Filtreleme

Arama çubuğu, kullanıcının sağladığı sorguyu kullanarak bir aramayı tetiklemelidir. Bu, handleChange işlevi içindeki verileri filtrelemeniz gerektiği anlamına gelir. Durumdaki filtrelenmiş verileri de takip etmelisiniz.

İlk olarak, verileri içerecek şekilde durumu değiştirin:

sabit [durum, setdurum] = kullanımDevlet({
 sorgu: '',
liste: []
})

Her değer için bir tane oluşturmak yerine durum değerlerini bu şekilde bir araya getirmek, işleme sayısını azaltır ve performansı artırır.

Filtrelediğiniz veriler, arama yapmak istediğiniz herhangi bir şey olabilir. Örneğin, bunun gibi örnek blog gönderilerinden oluşan bir liste oluşturabilirsiniz:

sabit gönderiler = [
 { 
 url: '',
 etiketler: ['tepki', 'Blog'],
 başlık: 'Nasıl yaratmak bir tepki aramak çubuk',
 },
 {
 url:'',
 etiketler: ['düğüm','ifade etmek'],
 başlık: 'Düğümde api verileriyle nasıl alay edilir',
 },
// daha fazla veri burada
 ]

ayrıca yapabilirsin bir API kullanarak verileri getir bir CDN'den veya bir veri tabanından.

Ardından, kullanıcı girdinin içine her yazdığında verileri filtrelemek için handleChange() işlevini değiştirin.

sabit handChange = (e) => {
sabit sonuçlar = gönderiler.filter (gönderi => {
 eğer (e.hedef.değer "") geri dönüş gönderileri
geri dönmekpostalamak.başlık.toLowerCase().içerir(e.hedef.değer.toLowerCase())
 })
 durum ayarla({
sorgu: e.hedef.değer,
liste: sonuçlar
 })
}

İşlev, sorgu boşsa gönderileri aramadan döndürür. Bir kullanıcı bir sorgu yazdıysa, gönderi başlığının sorgu metnini içerip içermediğini kontrol eder. Gönderi başlığını ve sorguyu küçük harfe dönüştürmek, karşılaştırmanın büyük/küçük harfe duyarlı olmamasını sağlar.

Filter yöntemi sonuçları döndürdüğünde, handleChange işlevi durumu sorgu metni ve filtrelenmiş verilerle günceller.

Arama Sonuçlarını Görüntüleme

Arama sonuçlarını görüntülemek, liste dizisini kullanarak döngü yapmayı içerir. harita yöntemi ve her öğe için verileri görüntüleme.

ihracatvarsayılanişlevUygulama() {
// durum ve handleChange() işlevi
geri dönmek (
<div>
<biçim>
<input onChange={handleChange} değer={durum.query} tür="aramak"/>
</form>
<Ul>
 {(durum.sorgu ''? "": state.list.map (yazı => {
 geri dönmek <li tuşu={post.title}>{yazı başlığı}</li>
 }))}
</ul>
</div>
 )
}

Ul etiketinin içinde bileşen, sorgunun boş olup olmadığını kontrol eder. Öyleyse, boş bir dize görüntüler çünkü bu, kullanıcının hiçbir şey aramadığı anlamına gelir. Halihazırda görüntülemekte olduğunuz öğeler listesinde arama yapmak istiyorsanız, bu kontrolü kaldırın.

Sorgu boş değilse, harita yöntemi arama sonuçlarını yineler ve gönderi başlıklarını listeler.

Arama sonuç döndürmezse faydalı bir mesaj görüntüleyen bir kontrol de ekleyebilirsiniz.

<Ul>
 {(durum.sorgu ''? "Sorguyla eşleşen yayın yok": !durum.liste.uzunluk? "Sorgunuz herhangi bir sonuç döndürmedi": state.list.map (yazı => {
 geri dönmek <li tuşu={post.title}>{yazı başlığı}</li>
 }))}
</ul>

Bu mesajın eklenmesi kullanıcı deneyimini geliştirir çünkü kullanıcı boş bir alana bakmıyor.

Birden Fazla Arama Parametresi İşleme

Bir veri dizisini filtreleyen özel bir arama öğesi oluşturmak için JavaScript olaylarıyla birlikte React durumunu ve kancaları kullanabilirsiniz.

Filtre işlevi yalnızca, sorgunun dizinin içindeki nesnelerdeki bir özellikle (başlık) eşleşip eşleşmediğini kontrol eder. Sorguyu nesnedeki diğer özelliklerle eşleştirmek için mantıksal OR işlecini kullanarak arama işlevini geliştirebilirsiniz.