組件上的反應數據網格過濾器

Question

我正在嘗試創建一個名爲table的組件，以便我可以重用它。我傳遞行和列將父項作爲屬性。一切正常，它顯示行和列，它顯示過濾器，但當我在過濾器上輸入一些值。

它給我這個錯誤：

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

也許我是在一個糟糕的approuch當我定義狀態和組件的屬性。

如何在反應數據網格組件中實現過濾器。

我的代碼是：

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()}