我们可以将过滤器组件的输入字段替换为 material UI 文本字段吗
Can we just replace input field of filter component to a material UI text field
我正在尝试用 materialUI 文本字段中的文本字段替换过滤器组件输入字段。
我可以通过创建一个新组件来显示输入字段,但它不能过滤内容。
我不想要不同的过滤器功能只是想用 material UI 文本字段替换输入字段
当前干锅部分是
从“/imports/ui/components/admin/common/pagination-new”导入分页;
从“/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',]}/>
过滤组件
render() {
return (
<div style={{display: 'flex'}}>
<TextField
name='title'
floatingLabelText='title'
/>
</div>
)
},
是的,这是可以做到的。您提供给 customFilterComponent
的组件将从 Griddle 接收以下道具:changeFilter
、results
、currentResults
、placeholderText
。然后您可以在该组件中引用这些,并将它们传递到 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>
)
}
我正在尝试用 materialUI 文本字段中的文本字段替换过滤器组件输入字段。 我可以通过创建一个新组件来显示输入字段,但它不能过滤内容。
我不想要不同的过滤器功能只是想用 material UI 文本字段替换输入字段
当前干锅部分是
从“/imports/ui/components/admin/common/pagination-new”导入分页; 从“/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',]}/>
过滤组件
render() {
return (
<div style={{display: 'flex'}}>
<TextField
name='title'
floatingLabelText='title'
/>
</div>
)
},
是的,这是可以做到的。您提供给 customFilterComponent
的组件将从 Griddle 接收以下道具:changeFilter
、results
、currentResults
、placeholderText
。然后您可以在该组件中引用这些,并将它们传递到 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>
)
}