Duyarlı bir arama çubuğu, web sitenizin veya uygulamanızın kullanımını çok daha keyifli hale getirebilir. Ayrıca React’in durumu nasıl yönettiğini öğrenmek için harika bir proje.
Arama çubukları, kullanıcıların web sitenizde ihtiyaç duyduklarını 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ç, duyarlı, işlevsel bir arama kutusudur.
Arama Çubuğu Oluşturma
Arama, bir kullanıcıdan girdi alacak ve filtreleme işlevini tetikleyecektir. React’te form oluşturmak için Formik gibi bir kitaplık kullanabilirsiniz, ancak sıfırdan bir arama çubuğu da oluşturabilirsiniz.
Bir React projeniz yoksa ve takip etmek istiyorsanız, create-react-app komutunu kullanarak bir tane oluşturun.
npx create-react-app search-bar
App.js dosyasında, giriş etiketi dahil form öğesini ekleyin :
export default function App() {
return (
<div>
<form>
<input type=”search”/>
</form>
</div>
)
}
Girişi kontrol etmek için useState React kancasını ve onChange olayını kullanmalısınız. Bu nedenle, useState’i içe aktarın ve girişi durum değerini kullanacak şekilde değiştirin:
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>
)
}
Bir kullanıcı giriş öğesinin içine her bir şey yazdığında, handleChange durumu günceller.
Girdi Değişiminde 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, durumu verileri içerecek şekilde değiştirin:
const [state, setstate] = useState({
query: ”,
list: []
})
Her değer için bir tane oluşturmak yerine durum değerlerini bu şekilde gruplamak, oluşturma sayısını azaltarak performansı artırır.
Filtrelediğiniz veriler, üzerinde arama yapmak istediğiniz herhangi bir şey olabilir. Örneğin, bunun gibi örnek blog gönderilerinin bir listesini oluşturabilirsiniz:
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
]
Verileri, bir CDN’den veya bir veritabanından bir API kullanarak da getirebilirsiniz.
Ardından, kullanıcı girişin içine her yazdığında verileri filtrelemek için handleChange() işlevini değiştirin.
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
})
}
İş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.
Filtre 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ın görüntülenmesi, harita yöntemini kullanarak liste dizisi üzerinde döngü yapmayı ve her bir öğe için verileri görüntülemeyi içerir.
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>
)
}
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 bir öğe listesinde arama yapmak istiyorsanız bu kontrolü kaldırın.
Sorgu boş değilse, harita yöntemi arama sonuçları üzerinde yinelenir ve gönderi başlıklarını listeler.
Arama sonuç vermezse yararlı bir mesaj görüntüleyen bir kontrol de ekleyebilirsiniz.
<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>
Bu mesajın eklenmesi kullanıcı deneyimini iyileştirir, çünkü kullanıcı boş bir alana bakar.
Birden Fazla Arama Parametresini İş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 dizi 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 VEYA operatörünü kullanarak arama işlevini geliştirebilirsiniz.