Можем ли мы просто заменить поле ввода компонента фильтра на текстовое поле текстового поля

Question

Я пытаюсь заменить поле ввода компонентов фильтра текстовым полем из текстового поля materialUI. Я могу отображать поле ввода, создавая новый компонент, но не фильтруя его содержимое.

Я не хочу другую функцию фильтра просто хотел заменить поле ввода с текстового поля материал UI

Текущий Мясная раздел

импорт Разбивка из «/ импорта/щ/компоненты/администратор/общее/пагинация новый '; импортная фильтрация из '/ import/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> 
    ) 
}