react filter search下載 - react filter search原始碼下載

react filter search

其他源碼

1.0.0

下載

反應過濾器搜尋？

這是一個小型、不顯眼的 React 元件，用於過濾客戶端應用程式資料。

安裝

npm i react-filter-search

yarn add react-filter-search

用法

React Filter Search 只是一個需要應用程式狀態資料的元件（需要是一個object array和一個輸入值。反過來，你會得到...

根據用戶輸入過濾數據
沒有任何搜尋輸入的所有數據

資料以renderResults的形式回流，這是一個返回上述內容之一的渲染道具。因此，您將負責設定傳入資料和輸入值。

透過這種方式，React Filter Search 對於如何儲存資料以及如何處理應用程式中的使用者輸入沒有任何意見。？

 //
/*-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 >
    ) ;
  }
}

神奇的事情發生在renderResults中，它會傳回一個物件陣列。您的資料要么已根據用戶輸入進行過濾，要么沒有過濾。

過濾邏輯將迭代資料結構中任何層級的嵌套。這意味著對此的一個很好的建議是諸如用戶資料或待辦事項之類的內容，這些內容在許多層面上都沒有大量嵌套。

如果您希望僅使用某些屬性進行過濾，那麼您可以使用可選的pick屬性。

 // 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