在组件上反应数据网格过滤器答案

【问题标题】：React Data Grid Filter on Component在组件上反应数据网格过滤器
【发布时间】：2017-08-05 04:41:41
【问题描述】：

我正在尝试创建一个名为 table 的组件，以便我可以重用它。我通过行和列将父级作为属性。一切正常，它显示行和列，它显示过滤器，但是当我在过滤器上输入一些值时。

它给了我这个错误：

> react-data-grid.js?3c74:9263 Uncaught TypeError: Cannot read property '__metaData' of undefined

也许我在定义组件的状态和属性时采取了错误的做法。

如何在反应数据网格组件中实现过滤器。

我的代码是：

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import ReactDataGrid from 'react-data-grid';
const { Toolbar, Data: { Selectors } } = require('react-data-grid-addons');
import * as dashboardActions from '../actions/dashboardActions';

export default React.createClass({

  getInitialState() {
    return {  filters: {} };
  },


  getRows() {
    var newProps = {};
    newProps.filters = this.state.filters;
    newProps.rows = this.props.rows;
    return Selectors.getRows(newProps);
  },

  rowGetter(rowIdx) {
    let rows = this.getRows();
    return rows[rowIdx];
  },

  getSize() {
    return this.getRows().length;
  },


  handleFilterChange(filter) {

    let newFilters = Object.assign({}, this.props.filters);
    if (filter.filterTerm) {
      newFilters[filter.column.key] = filter;
    } else {
      delete newFilters[filter.column.key];
    }    
    this.setState({ filters: newFilters });
  },

  render() {
    const { rows, columns, filters } = this.props;



    return (
      <div>
        <ReactDataGrid
          columns={columns}
          minHeight={600}
          rows={rows}
          rowGetter={this.rowGetter}
          rowsCount={rows.length}
          rowHeight={35}
          enableDragAndDrop
          toolbar={<Toolbar enableFilter={true} />}
          onAddFilter={this.handleFilterChange}

        />
      </div>
    );
  }
});

【问题讨论】：

标签： javascript reactjs react-data-grid

【解决方案1】：

问题在于rowsCount 指的是完整的行集，这意味着rowGetter 将尝试获取未包含在过滤器中的行。如果您查看http://adazzle.github.io/react-data-grid/scripts/example09-filterable-grid.js，您会发现您需要

getSize() {
  return this.getRows().length;
}

和

rowsCount={this.getSize()}

【讨论】：