react search input

반응 검색 입력

검색 입력을 위한 간단한 React 구성 요소로, 필터 기능을 제공합니다.

데모

설치하다

npm install react-search-input --save

예

 import React , { Component } from 'react'
import SearchInput , { createFilter } from 'react-search-input'

import emails from './mails'

const KEYS_TO_FILTERS = [ 'user.name' , 'subject' , 'dest.name' ]

class App extends Component {
  constructor ( props ) {
    super ( props )
    this . state = {
      searchTerm : ''
    }
    this . searchUpdated = this . searchUpdated . bind ( this )
  }

  render ( ) {
    const filteredEmails = emails . filter ( createFilter ( this . state . searchTerm , KEYS_TO_FILTERS ) )

    return (
      < div >
        < SearchInput className = "search-input" onChange = { this . searchUpdated } / >
        { filteredEmails . map ( email => {
          return (
            < div className = "mail" key = { email . id } >
              < div className = "from" > { email . user . name } < / div >
              < div className = "subject" > { email . subject } < / div >
            < / div >
          )
        } ) }
      < / div >
    )
  }

  searchUpdated ( term ) {
    this . setState ( { searchTerm : term } )
  }
} 

API

소품

모든 소품은 선택사항입니다. 다른 모든 props는 DOM 입력으로 전달됩니다.

클래스 이름

구성요소의 클래스( search-input 에 추가).

변경 시

검색어가 변경될 때 호출되는 함수(인수로 전달됩니다).

필터키

[String] 또는 String 입니다. 인수가 전달되지 않으면 filter 메소드에서 사용됩니다.

조절판

onChange 함수에 대한 호출 빈도를 줄입니다(ms 단위). 기본값은 200 입니다.

대소문자 구분

검색에서 대소문자를 구분해야 하는지 정의합니다. 기본값은 false 입니다

흐린

검색이 퍼지되어야 하는지 정의합니다. 기본값은 false 입니다

정렬결과

검색 결과를 관련성에 따라 정렬해야 하는지 정의합니다(퍼지 검색에서만 작동). 기본값은 false 입니다

값

입력 값을 정의합니다.

행동 양식

필터([키])

배열을 필터링하는 데 사용할 수 있는 함수를 반환합니다. keys String , [String] 또는 null 일 수 있습니다.

배열 keys 배열인 경우 항목의 키 중 하나 이상이 검색어와 일치하면 함수는 true를 반환합니다.

정적 메서드

filter(searchTerm, [keys], [{caseSensitive, fuzzy, sortResults}])

배열을 필터링하는 데 사용할 수 있는 함수를 반환합니다. searchTerm regex 또는 String 일 수 있습니다. keys String , [String] 또는 null 일 수 있습니다.

배열 keys 배열인 경우 항목의 키 중 하나 이상이 검색어와 일치하면 함수는 true를 반환합니다.

스타일

이 구성 요소의 스타일을 지정하는 방법에 대한 아이디어는 React-search-input.css를 참조하세요.

---

MIT 라이센스