使用Reaction-Data-Table-Component进行数据表过滤 [英] Data Table filtering using react-data-table-component

问题描述

我需要将下面的代码转换为没有钩子的普通类组件，有没有人能帮我解决这个问题？ 这里是我所指的链接 https://jbetancur.github.io/react-data-table-component/?path=/story/filtering--example-1 我需要在不使用钩子的情况下进行过滤，因为我只使用类组件。 以下是我使用的版本： "Reaction-Data-Table-Component"："^6.9.3"， "REACT"："^16.12.0"，

推荐答案

我想这就是您要找的.

 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
          />
        );
      }
    }

这篇关于使用Reaction-Data-Table-Component进行数据表过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！