Können wir das Eingabefeld der Filterkomponente einfach in ein Material-UI-Textfeld ersetzen?

Question

Ich versuche das Filterkomponenten-Eingabefeld durch ein Textfeld aus dem materialUI-Textfeld zu ersetzen. Ich kann das Eingabefeld anzeigen, indem ich eine neue Komponente erstelle, aber den Inhalt nicht filtriere.

Ich will nicht andere Filterfunktion wollte nur mit Feldmaterial UI Texteingabefeld ersetzen

Aktuelle Griddle Abschnitt

Import Paginierung von ‚/ Einfuhr/ui/components/admin/üblich/Paginierung-neu '; Import Filterung von '/ Importe/UI/Komponenten/Admin/Common/Filtration-neu';

<Griddle 
     ref={(ref) => {this._griddle = ref}} 
     useGriddleStyles={false} 
     columnMetadata={columnMeta} 
     results={this.getGriddleData()} 
     resultsPerPage={5} 
     tableClassName='table' 
     showFilter={true} 
     settingsText={''} 
     showSettings={true} 
     settingsToggleClassName={'text-hide'} 
     settingsIconComponent={ 
     <RaisedButton 
      label='Columns' 
      primary={true} 
     />} 
     useCustomPagerComponent={true} 
     customPagerComponent={Pagination} 
     useCustomFilterComponent={true} 
     customFilterComponent={Filteration} 
     columns={[ 
     'actions','name', 'published', 'whiteboard.exist', 
     'location.floor', 'capacity.number', 
     'av.tv','av.appleTv','av.videocon',]}/> 

Filteration Komponente

render() { 
    return (
     <div style={{display: 'flex'}}> 
      <TextField 
      name='title' 
      floatingLabelText='title' 
      /> 
     </div> 
    ) 
    }, 

Answer 1

Ja, das getan werden kann. Die Komponente, die Sie an customFilterComponent liefern, wird die folgenden Stützen von der Bratpfanne erhalten: changeFilter, results, currentResults, placeholderText. Sie können dann auf diese innerhalb dieser Komponente verweisen und sie auf das Material-ui TextField:

render() { 
    const { changeFilter, results, currentResults, placeholderText } = this.props; 

    return (
     <div style={{ display: 'flex' }}> 
      <TextField 
       onChange={(e, value) => changeFilter(value)} 
       name='title' 
       floatingLabelText={placeholderText} 
      /> 
     </div> 
    ) 
}