react filter search

Bereaksi Filter Pencarian?

Ini adalah komponen React yang kecil dan tidak mengganggu untuk memfilter data aplikasi sisi klien.

Instalasi

npm i react-filter-search

yarn add react-filter-search

Penggunaan

React Filter Search hanyalah sebuah komponen yang memerlukan data dalam status aplikasi (harus berupa array object dan nilai input. Pada gilirannya, Anda akan mendapatkan kembali...

• data yang disaring berdasarkan input pengguna
• semua data tanpa adanya input pencarian apa pun

Data ini mengalir kembali dalam bentuk renderResults , yang merupakan prop render yang mengembalikan salah satu hal di atas. Jadi, Anda akan bertanggung jawab untuk menyiapkan penerusan data dan nilai masukan.

Dengan cara ini, React Filter Search tidak memiliki opini tentang cara Anda menyimpan data dan cara Anda menangani input pengguna dalam aplikasi Anda. ?

 //
/*-Other Imports-*/
//
import FilterResults from 'react-filter-search' ;

class App extends Component {
  constructor ( props ) {
    super ( props ) ;
    this . state = {
      data : [ ] ,
      value : ''
    } ;
  }
  componentWillMount ( ) {
    fetch ( 'https://jsonplaceholder.typicode.com/users' )
      . then ( response => response . json ( ) )
      . then ( json => this . setState ( { data : json } ) ) ;
  }
  handleChange = event => {
    const { value } = event . target ;
    this . setState ( { value } ) ;
  } ;
  render ( ) {
    const { data , value } = this . state ;
    return (
      < div >
        < input type = "text" value = { value } onChange = { this . handleChange } / >
        < SearchResults
          value = { value }
          data = { data }
          renderResults = { results => (
            < div >
              { results . map ( el => (
                < div >
                  < span > { el . name } < / span >
                  < span > { el . email } < / span >
                < / div >
              ) ) }
            < / div >
          ) }
        / >
      < / div >
    ) ;
  }
}

Keajaiban ?terjadi di renderResults , yang mengembalikan array objek. Data Anda telah difilter berdasarkan masukan pengguna, atau belum.

Logika pemfilteran akan mengulangi tingkat penyarangan mana pun dalam struktur data Anda. Artinya, saran yang bagus untuk ini adalah sesuatu seperti data pengguna atau item tugas yang tidak terlalu bertumpuk di banyak level.

Jika Anda ingin memfilter hanya menggunakan atribut tertentu maka Anda dapat menggunakan prop pick opsional.

 // if each object is of the form
var obj = { name : "Leanne Graham" , username : "Bret" , email : "[email protected]" , company : { "name" : "Romaguera-Crona" } }
< SearchResults
  . . .
  pick = { [ 'username' , 'company.name' ] }
  ...
/ >
// your objects will be filtered only with the name and company.name fields
// but you can still render other values like username and email

Untuk merender data Anda, cukup gunakan .map() untuk merender ke tampilan--data tetap berada dalam struktur yang sama. Kembalikan beberapa JSX sebaris, atau masukkan setiap elemen ke dalam komponen React tanpa status yang merender beberapa UI.

props

nama	jenis	diperlukan?
value	string	true
data	array object s	true
renderResults	func	true
pick	array string s	false

Kontribusi

Baca CONTRIBUTING.md dan bergabunglah dalam keseruannya! ?