Globale Tabelle Suche reagieren

Question

Ich versuche, globale Suche mit neuem Material Ui nächste Tabelle Komponente implementieren, ich habe HandleSearch-Methode, die Ereignis empfängt, und dann verwende ich regexp, um zu überprüfen, ob event.target.value der gleiche wie in Tabelle. Aber wenn ich die Zeichenfolge in der Suche lösche, werden die Spalten nicht aktualisiert. Es fängt an zu suchen nur ich beginne Typ. Wie durch Nummer nicht nur durch Zeichenfolge in diesem Fall

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