我们可以将过滤器组件的输入字段替换为材质 UI 文本字段吗答案

【问题标题】：Can we just replace input field of filter component to a material UI text field我们可以将过滤器组件的输入字段替换为材质 UI 文本字段吗
【发布时间】：2016-12-14 17:39:48
【问题描述】：

我正在尝试用 materialUI 文本字段中的文本字段替换过滤器组件输入字段。我可以通过创建一个新组件来显示输入字段，但它不能过滤内容。

我不想要不同的过滤功能只是想用材料 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>
    )
  },

【问题讨论】：

标签： css reactjs material-ui griddle

【解决方案1】：

是的，这可以做到。您提供给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>
    )
}

【讨论】：