1
私は再利用できるように、テーブルと呼ばれるコンポーネントを作成しようとしています。私は行を渡し、列はプロパティとして親を投げる。すべての行と列を表示するOKですが、それはフィルタを表示しますが、私はフィルタにいくつかの値を入力します。コンポーネント上のReact Data Grid Filter
それは私に、このエラーを与える：私はコンポーネントの状態とプロパティを定義するとき
> 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>
);
}
});