我們可以只是將過濾器組件的輸入字段替換爲材質UI文本字段

Question

我試圖用materialUI文本字段中的文本字段替換過濾器組件輸入字段。 我能夠通過創建一個新的組件來顯示輸入字段，但它沒有過濾內容。

我不想不同的過濾功能只是想用材料UI文本字段更換輸入字段

當前幹鍋部分是從「/進口/ UI /組件/管理/通用/

進口分頁分頁新「; import from'/ imports/ui/components/admin/common/filteration-new';

<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組件

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

Answer 1

是的，這是可以做到。您提供給customFilterComponent的組件將從Griddle收到以下道具：changeFilter,results,currentResults,placeholderText。然後，您可以在該組件內引用這些內容，並將它們傳遞到材質上 - 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> 
    ) 
}