reactjs - react-virtualized ,在哪里调用 forceUpdateGrid 来更新表格数据?
问题描述
在排序表数据时,我似乎无法调用原始文档forceUpdateGrid
中提到的更新表数据
我收到此错误
'forceUpdateGrid' 未定义
当用户单击表头时我需要更新表数据,目前它在页面滚动后更新。我在表中有 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 组件公开的公共方法,您可以使用我在Table
like上定义一个 refthis.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;
推荐阅读
- javascript - filter in form not responding to check box
- javascript - 如何将参数从剃刀发送到 JavaScript 函数
- ruby-on-rails - 如何修复“SQLite3::SQLException:没有这样的列:{table_name}.{singular_table_name}_id:”
- powershell - JIRA Cloud API GET 请求 - 适用于 Postman,但不适用于 Powershell
- permissions - Umbraco:如何检查是否允许成员以编程方式访问页面
- java - 素数分解计算器中的 For 循环显示合数,并且循环不会重新启动
- sql-server - 适用于 Azure Key Vault 的 SQL Server 连接器与 SQL 2017 开发人员版是否可行?
- c# - MassTransit - 多个消费者都可以收到相同的消息吗?
- sbt - 使用 sbt 查找包含 jar 的项目
- python - 子进程在持久性反向 Shell 程序中停止进程