react filter search

Реагировать на поиск по фильтру?

Это небольшой, ненавязчивый компонент React для фильтрации данных клиентского приложения.

Установка

npm i react-filter-search

yarn add react-filter-search

Использование

React Filter Search — это просто компонент, которому требуются данные о состоянии приложения (должен быть array object и входным значением. В свою очередь, вы получите обратно...

• отфильтрованные данные на основе пользовательского ввода
• все данные при отсутствии каких-либо поисковых данных

Эти данные возвращаются обратно в форме 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

Чтобы визуализировать ваши данные, просто используйте .map() для рендеринга в представление — данные сохраняются в той же структуре. Верните некоторый встроенный JSX или передайте каждый элемент в компонент React без сохранения состояния, который отображает некоторый пользовательский интерфейс.

props

имя	тип	необходимый?
value	string	true
data	array object s	true
renderResults	func	true
pick	array string s	false

Взносы

Читайте CONTRIBUTING.md и присоединяйтесь к веселью! ?