React ile Yazarken Arama Sonuçlarını Filtreleme

React ile Yazarken Arama Sonuçlarını Filtreleme

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ı türleri olarak 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.



GÜNÜN YAPILAN VİDEOSU

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 create-react-app search-bar

İçinde App.js dosyasına giriş etiketi de dahil olmak üzere form öğesini ekleyin:



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

kullanmalısın Kullanım Durumu Tepki kancası ve onChange Girişi kontrol etmek için olay. 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, koluDeğiştir 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:



çevrimiçi birini bulmanın en iyi yolu 
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 
  ]

Ayrıca bir API kullanarak verileri getir CDN veya veritabanından.

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ı görüntülemek, aşağıdakileri kullanarak liste dizisi üzerinde döngü yapmayı içerir. harita yöntemi ve her öğe için verileri görüntüleme.

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.

android wifi şifresi nasıl görülür

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.