Reagieren Data Grid Filter auf Komponente

Question

Ich versuche, eine Komponente namens Tabelle zu erstellen, damit ich es wiederverwenden kann. Ich gebe die Zeilen und die Spalten werfen die Eltern als Eigenschaften. Alles ist in Ordnung, es zeigt die Zeilen und Spalten an, es zeigt die Filter an, aber wenn ich etwas Wert auf die Filter gebe.

Es gibt mir diese Fehlermeldung:

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

Vielleicht ein schlechtes approuch Ich nehme, wenn ich die Zustände und Eigenschaften der Komponente zu definieren.

Wie kann ich einen Filter in einer reaktiven Datenrasterkomponente implementieren?

Mein Code ist:

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

Das Problem ist, dass rowsCount zur vollständigen Satz von Zeilen bezieht, rowGetter was bedeutet, werden versuchen, Zeilen erhalten nicht im Filter enthalten. Wenn Sie bei http://adazzle.github.io/react-data-grid/scripts/example09-filterable-grid.js anschauen, werden Sie sehen, dass Sie

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

benötigen und

rowsCount={this.getSize()}