时间戳

首页 > 解决方案 > reactjs redux中如何排序和过滤

reactjs - reactjs redux中如何排序和过滤

问题描述

我有一个来自后端的数组中的项目列表。我在我的应用程序中使用 redux 进行状态管理。在这里，我有一个下拉列表和一个要搜索的文本字段。当用户从数组中的下拉项目中选择任何项目时，将使用相应的项目进行排序，然后从该排序的项目中，用户过滤器使用相应的搜索文本过滤数据。这看起来像这样。我不知道应该排序或过滤来解决这种天气。任何帮助都会很棒。

图像

这就是我的代码的样子

const Administrator = (props) => {

  const [menuValues, setMenuValues] = React.useState("");
  const [tableData, setTableData] = useState([]);

  const [filterText, setFilterText] = useState("");





  const DataReceived = (state) =>
    state.AllUsers.Admin.site_managers.data._embedded;
  const selectedData = useSelector(DataReceived, shallowEqual);
  const selectedDataAgain = selectedData
    ? selectedData.adminUserResourceList
    : null;

  React.useEffect(() => {
    props.getUserLoadSiteManagers(props.accessToken);

    setTableData(selectedDataAgain);
  }, []);

  function handleChange(event) {
    if (event.target.value) {
      setMenuValues(event.target.value);
    } else {
      setMenuValues("all");
    }
  }


  const handleFilterText = (e) => {
    e.preventDefault();
    setFilterText(e.target.value);
  };

  const handleFilterClick = () => {
    console.log(filterText);
  };

  return (
    <Container maxWidth="lg">

          <div>
            <Select
              value={menuValues}
              onChange={handleChange}
              input={

              }

            >
              <MenuItem value="all">
                <em>All</em>
              </MenuItem>
              <MenuItem value={"name"}>Name</MenuItem>
              <MenuItem value={"designation"}>Designation</MenuItem>
              {/* <MenuItem value={"team"}>Team</MenuItem> */}
              <MenuItem value={"userType"}>User</MenuItem>
              <MenuItem value={"permission"}>Permission</MenuItem>
            </Select>
          </div>
          <div>
            <TextField

              onChange={handleFilterText}
              value={filterText}
            />
          </div>
        </div>
        <div className={classes.dense}>
          <ButtonBig onClick={handleFilterClick} title="Apply Filter" />
        </div>
      </Card>

      <Table
        data={TableData}
        isItemSelected
        numSelected={() => numSelected(numSelected)}
        onClick={SelectedId(SelectedId)}
      />


    </Container>
  );
};

标签： reactjsreact-redux

解决方案

你可以同时做这两个。在您构建表数据的地方，您可以放置​​如下内容：

<Table
    data={{...TableData.filter((item) => filterText ? <here you should filter the item> : true)}
    .sort(item => item[menuValues] > item[menuValues] /*here made the comparation to sort the list*/)}
    isItemSelected
    numSelected={() => numSelected(numSelected)}
    onClick={SelectedId(SelectedId)}
  />

推荐阅读