在对表格数据进行排序时,我似乎无法调用 forceUpdateGrid
来更新表格数据,如 original docs 中所述
我收到这个错误
'forceUpdateGrid' is not defined
我需要在用户点击表格标题时更新表格数据,目前它是在页面滚动后更新的。我在表格中有 3 列,我需要按每个列标题对表格进行排序和更新
import React from 'react';
import { Column, Table, SortDirection, SortIndicator } from 'react-virtualized';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import _ from 'underscore';
import 'react-virtualized/styles.css';
import { fakeJson } from './Data/fakeJson';
const datalist = fakeJson;
const list = datalist;
class TableComponent2 extends React.Component {
constructor(){
super();
this.state = {
sortBy: 'username',
sortDirection: SortDirection.DESC,
sortedList: list
}
}
sort({ sortBy, sortDirection }) {
console.log(list)
const tempList = _.sortBy(list, item => item[sortBy]);
console.log(tempList);
const sortedList = tempList.update(
list =>
sortDirection === SortDirection.DESC ? list.reverse() : list
);
this.setState({ sortBy, sortDirection, sortedList });
this.forceUpdateGrid;
}
render() {
return (
<AutoSizer disableHeight>
{({ width }) => (
<Table
headerHeight={20}
height={740}
rowCount={datalist.length}
rowGetter={({ index }) => this.state.sortedList[index]}
rowHeight={60}
width={width}
sort={this.sort}
sortBy={this.state.sortBy}
sortDirection={this.state.sortDirection}
>
<Column
dataKey='id'
width={200}
flexGrow={1}
label='ID'
/>
<Column
dataKey='name'
width={200}
flexGrow={1}
label='NAME'
/>
<Column
dataKey='username'
width={200}
flexGrow={1}
label='USERNAME'
/>
</Table>
)}
</AutoSizer>
);
}
}
export default TableComponent2;
最佳答案
forceUpdateGrid
是 Table 组件公开的公共(public)方法,您可以使用我在 Table
上定义的引用,例如 this.tableRef.forceUpdateGrid
import React from 'react';
import { Column, Table, SortDirection, SortIndicator } from 'react-virtualized';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import _ from 'underscore';
import 'react-virtualized/styles.css';
import { fakeJson } from './Data/fakeJson';
const datalist = fakeJson;
const list = datalist;
class TableComponent2 extends React.Component {
constructor(){
super();
this.state = {
sortBy: 'username',
sortDirection: SortDirection.DESC,
sortedList: list
}
}
sort({ sortBy, sortDirection }) {
console.log(list)
const tempList = _.sortBy(list, item => item[sortBy]);
console.log(tempList);
const sortedList = tempList.update(
list =>
sortDirection === SortDirection.DESC ? list.reverse() : list
);
this.setState({ sortBy, sortDirection, sortedList });
this.tableRef.forceUpdateGrid();
}
render() {
return (
<AutoSizer disableHeight>
{({ width }) => (
<Table
ref={(ref) => this.tableRef = ref}
headerHeight={20}
height={740}
rowCount={datalist.length}
rowGetter={({ index }) => this.state.sortedList[index]}
rowHeight={60}
width={width}
sort={this.sort}
sortBy={this.state.sortBy}
sortDirection={this.state.sortDirection}
>
<Column
dataKey='id'
width={200}
flexGrow={1}
label='ID'
/>
<Column
dataKey='name'
width={200}
flexGrow={1}
label='NAME'
/>
<Column
dataKey='username'
width={200}
flexGrow={1}
label='USERNAME'
/>
</Table>
)}
</AutoSizer>
);
}
}
export default TableComponent2;
关于reactjs - react-virtualized ,在哪里调用 forceUpdateGrid 更新表数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54475248/