我已经尝试了几个小时在反应虚拟化桌面上添加排序功能,但是无法绕过它...这里是example和source code。对不起,我无法创建一个plnkr,所以我附上了一个链接到我的github repo。如何将列排序功能添加到我的表中?
我得到这个错误,当我和一个输入文本螺丝提交表单,例如:
TypeError: list.sortBy is not a function
at PartTable._sortList (PartTable.js:136)
at new PartTable (PartTable.js:18)
在上site他们使用上下文(const { list } = this.context;
)的例子,而不是道具。也许这是问题?
当我控制台登录this.props.list
我得到正确的列表(见两个示例文件)
_sortList({ sortBy, sortDirection }) {
const { list } = this.props;
// console.log(list);
return list
.sortBy(item => item[sortBy])
.update(
list => (sortDirection === SortDirection.DESC ? list.reverse() : list)
);
}
下面是两个对象从我的服务器,并为未来的props.list
[
{
customsTariff: "73181568",
facility: "SDC",
netWeight: "0,07",
partName: "CAPSCREW",
partNumber: "3121210233",
__v: 0,
_id: "59a9429ac0b7467bf084eb6e"
},
{
customsTariff: "73481568",
facility: "SDC",
netWeight: "0,08",
partName: "CAPSCREW2",
partNumber: "3121210333",
__v: 0,
_id: "59a9429ac0b7463bf084eb6e"
}
];
这里是来自PartTable.js的代码
import React, { PureComponent } from "react";
import { AutoSizer, Column, Table } from "react-virtualized";
import { CSVLink, CSVDownload } from "react-csv";
import Button from "material-ui/Button";
import PropTypes from "prop-types";
import SortDirection from "./SortDirection";
import SortIndicator from "./SortIndicator";
import Checkbox from "material-ui/Checkbox";
import "react-virtualized/styles.css";
import "../../styles/App.css";
import styles from "./Table.example.css";
export default class PartTable extends PureComponent {
constructor(props) {
super(props);
const sortBy = "partNumber"; // I want to sort by partNumber by default
const sortDirection = SortDirection.ASC;
const sortedList = this._sortList({ sortBy, sortDirection });
this.state = {
sortBy,
sortDirection,
rowCount: 1000,
sortedList
};
this._noRowsRenderer = this._noRowsRenderer.bind(this);
this._generateCheckbox = this._generateCheckbox.bind(this);
this._sort = this._sort.bind(this);
}
render() {
// console.log(this.props.list);
const { sortBy, sortDirection, sortedList } = this.state;
const rowGetter = ({ index }) => this._getDatum(sortedList, index);
const { list, headers } = this.props;
return (
<div>
<AutoSizer disableHeight>
{({ width }) => (
<Table
width={width}
height={500}
headerHeight={50}
rowHeight={50}
rowCount={list.length}
rowGetter={rowGetter}
noRowsRenderer={this._noRowsRenderer}
sort={this._sort}
sortBy={sortBy}
sortDirection={sortDirection}
>
{headers.map(header => {
return (
<Column
key={header.id}
label={header.label}
dataKey={header.id}
disableSort
width={100}
flexGrow={1}
cellRenderer={
header.index ? this._generateCheckbox : undefined
}
/>
);
})}
</Table>
)}
</AutoSizer>
<CSVLink data={list}>
<Button color="accent">Export {list.length} records to CSV</Button>
</CSVLink>
</div>
);
}
_noRowsRenderer() {
return <div>No Parts here...</div>;
}
_generateCheckbox(event) {
// console.log(event);
return (
<div className="table-check-box">
{this.props.activeCheckboxes && (
<Checkbox
onChange={() => this.props._activeCheckbox(event.rowData._id)}
checked={this.props.activeCheckboxes.includes(event.rowData._id)}
/>
)}
{event.cellData}
</div>
);
}
_isSortEnabled() {
const { list } = this.props;
const { rowCount } = this.state;
return rowCount <= list.size;
}
_getDatum(list, index) {
return list.get(index % list.size);
}
_sort({ sortBy, sortDirection }) {
const sortedList = this._sortList({ sortBy, sortDirection });
this.setState({ sortBy, sortDirection, sortedList });
}
_sortList({ sortBy, sortDirection }) {
const { list } = this.props;
// console.log(list);
return list
.sortBy(item => item[sortBy])
.update(
list => (sortDirection === SortDirection.DESC ? list.reverse() : list)
);
}
_rowClassName({ index }) {
if (index < 0) {
return styles.headerRow;
} else {
return index % 2 === 0 ? styles.evenRow : styles.oddRow;
}
}
}
PartTable.PropTypes = {
list: PropTypes.arrayOf({}).isRequired,
activeCheckboxes: PropTypes.arrayOf({}),
_activeCheckbox: PropTypes.func,
headers: PropTypes.arrayOf({}.isRequired)
};