グローバルテーブルの検索

Question

私は次のテーブルコンポーネントで新しいマテリアルを使ってグローバル検索を実装しようとしています。handleSearchメソッドがあり、イベントを受け取っていますし、regexpを使ってevent.target.valueもテーブルと同じかどうかを確認します。しかし、検索する文字列を削除すると、列は更新されません。それは私がタイプを開始するだけの検索を開始します。どのように私はあなたが番号を検索しようとしている理解何より、この場合

const columns = [ 
    { 
     dataKey: 'deviceType', 
     label:'Device Type', 
     numeric: false, 
    }, { 
     dataKey: 'deviceID', 
     label:'Device ID', 
     sortable: true, 
     numeric: true, 
     // cellRenderer: ({item, key}) => 
     //   <Button >Default</Button>, 
    }, { 
     ........ 
    }] 

const data = [ 
    { key: 1, deviceType: 'Tag', deviceID: 1, name:'Tag For sending an ', location: 'Room_104', status: 'assigned'}, 
    { key: 2, deviceType: 'Tag', deviceID: 2, name:'Tag For sending an ', location: 'Room_104', status: 'assigned'}, 
    {.......}, 
] 

class EnhancedTable extends Component { 
    state = { 
     selected: [], 
     data, 
     order: { 
      direction: 'asc', 
      by: 'deviceID', 
     }, 
     search: '', 
    } 

    handleSearch = event => { 
     debugger 
     const {data} = this.state 
     let filteredDatas = [] 
     filteredDatas = data.filter(e => { 
      let mathedItems = Object.values(e) 
      let returnedItems 
      mathedItems.forEach(e => { 
       const regex = new RegExp(event.target.value, 'gi') 
       if (typeof e == 'string') 
        returnedItems = e.match(regex) 
      }) 
      return returnedItems 
     }) 
     this.setState({data: filteredDatas, search: event.target.value}) 
    } 

    render =() => { 

     const {data, search} = this.state 

     return (
      <Paper> 
       <Table 
        data={data} 
        search={search} 
        onSearch={this.handleSearch} 
       /> 
      </Paper>) 
    } 
} 
export default EnhancedTable 

Answer 1

fuzzyContains = (text, search) => { 
     debugger 
     if (!text) 
      return false 
     if (!search) 
      return true 

     search = search.toLowerCase() 
     text = text.toString().toLowerCase() 

     let previousLetterPosition = -1 

     return search.split('').every(s => { 
      debugger 
      previousLetterPosition = text.indexOf(s, previousLetterPosition + 1) 

      return previousLetterPosition !== -1 
     }) 
    } 

    handleSearch = search => { 
     const {data} = this.state 
     // debugger 
     let filteredData = data.filter(x => Object.keys(x).some(key => 
      // debugger 
      this.fuzzyContains(x[key], search) 
     )) 
     console.log(filteredData) 
     this.setState({filteredData, search}) 
    }