React Data Grid Filters 默认启用（并打开）答案

【问题标题】：React Data Grid Filters Enabled (and open) by defaultReact Data Grid Filters 默认启用（并打开）
【发布时间】：2017-07-14 23:10:23
【问题描述】：

有没有办法让过滤器在 React Data Grid 中默认打开（显示）？最好是让我避免将toolbar={<Toolbar enableFilter />} 属性传递给<ReactDataGrid />

通读Adazzle component docs，似乎没有明显的道具可以传入<ReactDataGrid /> 主组件，该组件显示过滤器而不通过<Toolbar /> 组件调用onToggleFilter()。

我正在构建的最终网格组件将呈现过滤器输入，用户立即可见和可编辑，无需“点击清除”或以其他方式调用记录在案的 onClearFilters() 函数。这也使得<Toolbar /> 组件（和嵌套的<Filter Rows /> 按钮变得不必要。

我当前的组件是...

<ReactDataGrid
   onGridSort={this.handleGridSort}
   columns={this.state.columns}
   rowGetter={this.rowGetter}
   rowsCount={this.getSize()}
   toolbar={<Toolbar enableFilter />}
   onAddFilter={this.handleFilterChange}
   onClearFilters={this.onClearFilters}
/>

理想情况下最终组件看起来像这样......

<ReactDataGrid
  onGridSort={this.handleGridSort}
  columns={this.state.columns}
  rowGetter={this.rowGetter}
  rowsCount={this.getSize()}}
  onAddFilter={this.handleFilterChange}
  filtersVisible={true}  // Renders with filters visible/active
/>

【问题讨论】：

我在使用这个组件时遇到了自己的麻烦。我继续扩展它并编写了我自己的功能。祝你好运。

标签： reactjs react-data-grid

【解决方案1】：

你是对的，似乎没有内置的方法可以自动打开工具栏和过滤器，但是一个相当简单的解决方法是这样做

 componentDidMount(){
    this.myOpenGrid.onToggleFilter();
  }

然后在你的网格中添加一个 ref，这样它的过滤器就会在挂载时立即打开

<ReactDataGrid
   ref={(datagrid) => { this.myOpenGrid = datagrid; }}
   // all other set up
/>

【讨论】：

如果您想更进一步并隐藏工具栏和按钮以允许他们隐藏过滤器，您可以执行类似 .react-grid-Toolbar{ display: none; }
由于某种原因，这样做会使最后一列中所有单元格的内容消失。只有当我滚动网格时它们才会再次出现。
你是个天才！这么简单的解决方法，谢谢

【解决方案2】：

我也有同样的要求。我知道你说过你不想使用<Toolbar />，但是，为了记录，你能做什么。

我创建了自己的<Toolbar /> 组件。我按照他们的源代码here 只取了我需要的东西。

import React,{Component} from 'react';
class Toolbar extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.onToggleFilter();
    }

    render() {
        return (
            <div>
                {this.props.children}
            </div>
        );
    }
}

并将其添加到 ReactDataGrid 上的 toolbar 属性中。过滤器总是显示，没有按钮，不需要用 CSS 隐藏任何东西。

【讨论】：

【解决方案3】：

实现自己的 ReactDataGrid 类，并设置 canFilter=true 的状态。

import ReactDataGrid from "react-data-grid";

class MyDataGrid extends ReactDataGrid {
    constructor(props) {
        super(props);
        this.state.canFilter=true;
    }
}

export default MyDataGrid;

然后使用 MyDataGrid 类而不是 ReactDataGrid 类。

【讨论】：