我需要将下面的代码转换为没有钩子的普通类组件，任何人都可以帮我解决这个问题，这是我指的链接 https://jbetancur.github.io/react-data-table-component/?path =/story/filtering--example-1 我需要在不使用钩子的情况下进行过滤，因为我只使用类组件。以下是我使用的版本：- "react-data-table-component": "^6.9.3", "react": "^16.12.0",
使用 react-data-table-component 过滤数据表
IT技术
reactjs
datatable
filtering
2021-05-23 21:06:53
2个回答
您可以在组件本身中进行过滤
<DataTable
pagination="true"
columns={columns}
data={leaderBoardList.filter((item) => {
if (searchTerm === "") {
return item;
} else if (
item.name.toLowerCase().includes(searchTerm.toLowerCase())
) {
return item;
}
})}
/>
我想这就是你要找的...
class BasicTable extends React.PureComponent {
constructor(props) {
super(props);
this.state = { filterText: "", resetPaginationToggle: false };
this.filteredItems = fakeUsers.filter(
(item) =>
item.name && item.name.toLowerCase().includes(filterText.toLowerCase())
);
}
handleClear = () => {
const { resetPaginationToggle, filterText } = this.state;
if (this.state.filterText) {
this.setState({
resetPaginationToggle: !resetPaginationToggle,
filterText: ""
});
}
};
getSubHeaderComponent = () => {
return (
<FilterComponent
onFilter={(e) => {
let newFilterText = e.target.value;
this.filteredItems = fakeUsers.filter(
(item) =>
item.name &&
item.name.toLowerCase().includes(newFilterText.toLowerCase())
);
this.setState({ filterText: newFilterText });
}}
onClear={this.handleClear}
filterText={this.state.filterText}
/>
);
};
render() {
return (
<DataTable
title="Contact List"
columns={columns}
data={this.filteredItems}
pagination
paginationResetDefaultPage={this.state.resetPaginationToggle} // optionally, a hook to reset pagination to page 1
subHeader
subHeaderComponent={this.getSubHeaderComponent()}
selectableRows
persistTableHead
/>
);
}
}