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