我正在尝试遵循这个 ReactJS 教程:
第 1 部分:http: //4dev.tech/2015/12/reactjs-datatable-with-sort-filter-and-pagination-example-part-1/
第 2 部分:http: //4dev.tech/2016/03/tutorial-sorting-and-filtering-a-reactjs-datatable/
我成功完成了第 1 部分,我需要一些帮助才能完成第 2 部分。
这是我的第 2 部分代码:
import React from 'react';
import {Table, Column, Cell} from 'fixed-data-table';
class MyTable extends React.Component {
constructor(props) {
super(props);
this.rows = [{"id":1,"first_name":"William","last_name":"Elliott","email":"welliott0@wisc.edu",
"country":"Argentina","ip_address":"247.180.226.89"},
{"id":2,"first_name":"Carl","last_name":"Ross","email":"cross1@mlb.com",
"country":"South Africa","ip_address":"27.146.70.36"},
{"id":3,"first_name":"Jeremy","last_name":"Scott","email":"jscott2@cbsnews.com",
"country":"Colombia","ip_address":"103.52.74.225"},
]
this.state = {
filteredDataList: this.rows
};
}
_renderHeader(label, cellDataKey) {
return <div>
<span>{label}</span>
<div>
<br />
<input style={{width:90+'%'}} onChange={this._onFilterChange.bind(this, cellDataKey)}/>
</div>
</div>;
}
_onFilterChange(cellDataKey, event) {
if (!event.target.value) {
this.setState({
filteredDataList: this.rows,
});
}
var filterBy = event.target.value.toString().toLowerCase();
var size = this.rows.length;
var filteredList = [];
for (var index = 0; index < size; index++) {
var v = this.rows[index][cellDataKey];
if (v.toString().toLowerCase().indexOf(filterBy) !== -1) {
filteredList.push(this.rows[index]);
}
}
this.setState({
filteredDataList: filteredList,
});
}
render() {
return <Table
height={40+((this.rows.length+1) * 30)}
width={1150}
rowsCount={this.rows.length}
rowHeight={30}
headerHeight={30}
rowGetter={function(rowIndex) {return this.rows[rowIndex]; }.bind(this)}>
<Column dataKey="id" width={50} label="Id"
headerRenderer={this._renderHeader.bind(this)}/>
<Column dataKey="first_name" width={200} label="First Name" />
<Column dataKey="last_name" width={200} label="Last Name" />
<Column dataKey="email" width={400} label="e-mail" />
<Column dataKey="country" width={300} label="Country" />
</Table>;
}
}
module.exports = MyTable;
数据表显示但不显示用于过滤行的输入字段。
浏览器控制台没有显示任何错误,除了几个警告:
`rowGetter` will be DEPRECATED in version 0.7.0 of FixedDataTable and beyond.
Please use the cell API in Column to fetch data for your cells.
Read the docs at: https://fburl.com/FixedDataTable-v0.6
`label` will be DEPRECATED in version 0.7.0 of FixedDataTable and beyond.
Please use `header` instead.
Read the docs at: https://fburl.com/FixedDataTable-v0.6
`dataKey` will be DEPRECATED in version 0.7.0 of FixedDataTable and beyond.
Please use the `cell` API to pass in a dataKey
Read the docs at: https://fburl.com/FixedDataTable-v0.6
`headerRenderer` will be DEPRECATED in version 0.7.0 of FixedDataTable and beyond.
Please use the `header` API to pass in a React Element instead.
Read the docs at: https://fburl.com/FixedDataTable-v0.6
我不知道问题是什么。谢谢你的时间。