使用react- Data - Table -component进行数据表过滤

Question

我需要将下面的代码转换成没有钩子的普通类组件，有人能帮我吗，这里是我引用的https://jbetancur.github.io/react-data-table-component/?path=/story/filtering--example-1链接，我需要做过滤而不使用钩子，因为我只使用类组件。以下是我使用的版本：- "react-data-table-component"："^6.9.3"，"react"："^16.12.0"，

Answer 1

我想这就是你要找的..。

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

Answer 2

可以在组件本身中进行筛选

<DataTable
    pagination="true"
    columns={columns}
    data={leaderBoardList.filter((item) => {
      if (searchTerm === "") {
        return item;
      } else if (
        item.name.toLowerCase().includes(searchTerm.toLowerCase())
      ) {
        return item;
      }
    })}
  />