Question

我正在尝试创建一个名为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>
    );
  }
});

Answer 1

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

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

和

rowsCount={this.getSize()}

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

1 个答案: