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 } )
  }
} 

應用程式介面

道具

所有道具都是可選的。所有其他 props 將傳遞到 DOM 輸入。

類別名

元件的類別（除了search-input之外）。

改變時

搜尋詞更改時調用的函數（將作為參數傳遞）。

過濾鍵

要嘛是[String]要嘛是String 。如果沒有傳遞參數，將由filter方法使用。

風門

減少onChange函數的呼叫頻率（以毫秒為單位）。預設值為200 。

區分大小寫

定義搜尋是否應區分大小寫。預設為false

模糊

定義搜尋是否應該模糊。預設為false

排序結果

定義搜尋結果是否應依相關性排序（僅適用於模糊搜尋）。預設為false

價值

定義輸入的值。

方法

過濾器（[鍵]）

傳回一個可用於過濾數組的函數。 keys可以是String 、 [String]或null 。

如果數組keys是數組，則如果該項目的至少一個鍵與搜尋項匹配，則函數將傳回 true。

靜態方法

過濾器（searchTerm，[鍵]，[{caseSensitive，模糊，sortResults}]）

傳回一個可用於過濾數組的函數。 searchTerm可以是regex或String 。 keys可以是String 、 [String]或null 。

如果數組keys是數組，則如果該項目的至少一個鍵與搜尋項匹配，則函數將傳回 true。

風格

查看react-search-input.css 以了解如何設定此元件的樣式。

---

麻省理工學院許可