react filter search

Filtersuche reagieren?

Dabei handelt es sich um eine kleine, unauffällige React-Komponente zum Filtern clientseitiger Anwendungsdaten.

Installation

npm i react-filter-search

yarn add react-filter-search

Verwendung

React Filter Search ist einfach eine Komponente, die Daten im Anwendungsstatus benötigt (es muss ein array von object und ein Eingabewert sein. Im Gegenzug erhalten Sie zurück ...

• gefilterte Daten basierend auf Benutzereingaben
• Alle Daten ohne Sucheingabe

Diese Daten fließen in Form von renderResults zurück, einer Render-Requisite, die eines der oben genannten zurückgibt. Sie sind also für die Einrichtung der Datenübergabe und eines Eingabewerts verantwortlich.

Auf diese Weise hat React Filter Search keine Meinung darüber, wie Sie Ihre Daten speichern und wie Sie mit Benutzereingaben in Ihrer Anwendung umgehen. ?

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

Die Magie geschieht in renderResults , das ein Array von Objekten zurückgibt. Ihre Daten wurden entweder basierend auf Benutzereingaben gefiltert oder nicht.

Die Filterlogik iteriert über jede Verschachtelungsebene in Ihrer Datenstruktur. Das bedeutet, dass ein guter Vorschlag hierfür etwa Benutzerdaten oder Aufgabenelemente sind, die nicht stark auf vielen Ebenen verschachtelt sind.

Wenn Sie nur nach bestimmten Attributen filtern möchten, können Sie die optionale pick Requisite verwenden.

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

Um Ihre Daten zu rendern, verwenden Sie einfach .map() zum Rendern in der Ansicht – die Daten bleiben in derselben Struktur. Geben Sie Inline-JSX zurück oder speisen Sie jedes Element in eine zustandslose React-Komponente ein, die eine Benutzeroberfläche rendert.

props

Name	Typ	erforderlich?
value	string	true
data	array von object	true
renderResults	func	true
pick	array von string	false

Beiträge

Lesen Sie CONTRIBUTING.md und machen Sie mit! ?