Reactjs 默认情况下，React数据网格过滤器已启用（并打开）

在React数据网格中是否有一种方法可以使过滤器默认打开（显示）？最好是允许我避免将

工具栏={}

属性传递到

通过阅读，似乎没有一个明显的道具传递到主

组件，该组件显示过滤器，而无需通过

组件调用

onToggleFilter（）

我正在构建的最后一个网格组件将使用用户立即可见和可编辑的过滤器输入进行渲染，无需“单击以清除”或以其他方式调用文档化的

onClearFilters（）

函数。这也使得

组件（以及嵌套的

按钮）不必要

我当前的组件是

<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
/>

---

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

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

然后在网格中添加一个ref，以便在挂载时立即打开它的过滤器

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

{this.myOpenGrid=datagrid；}
//所有其他设置
/>

我也有同样的要求。我知道你说过你不想使用

，但是，为了记录在案，你可以做些什么

我创建了自己的

组件。我遵循他们的源代码，只取我需要的东西

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

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

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

import React，{Component}来自'React'；
类工具栏扩展组件{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
this.props.onToggleFilter（）；
}
render（）{
返回(
{this.props.children}
);
}
}

---

并将其添加到ReactDataGrid上的

工具栏

道具中。过滤器始终显示，无需按钮，无需使用CSS隐藏任何内容。

实现您自己的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类。

我自己也有这个组件的问题。我继续扩展了它，并编写了自己的功能。祝你好运。如果你想更进一步，隐藏工具栏和按钮，允许他们隐藏过滤器，你可以执行类似的操作。ReactGrid toolbar{display:none；}出于某种原因，这样做会使最后一列中所有单元格的内容消失。它们只有在我滚动网格时才会再次显示。你真是个天才！非常简单的解决方案，谢谢