Question

我正在使用Material UI在React中创建自己的可过滤表。

我创建了一个桌子，并通过了以下道具：

      createObject('BlueTree','05-02-2015','ativo', 'Vinhedo', 'São Paulo'),
      createObject('Inner','07-08-2016','inativo', 'Belo Horizonte', 'Minas Gerais'),
      createObject('Teste','05-02-2017','ativo', 'Teresina', 'Piauí'),
      createObject('hello','05-02-2015','ativo', 'Osasco', 'São Paulo'),
      createObject('Inner','07-08-2016','inativo', 'Lavras', 'Minas Gerais'),
      createObject('Teste','05-02-2017','inativo', 'Barras', 'Piauí'),
      createObject('xiaomi','05-02-2015','inativo', 'Indaiatuba', 'São Paulo'),
      createObject('Inner','07-08-2016','ativo', 'Pedrinhas', 'Minas Gerais'),
      createObject('Teste','05-02-2017','ativo', 'Esperantina', 'Piauí'),

并选择标签，例如“州，城市...”

selectFilter: [
      { Name: 'estado'},
      { Name: 'cidade'},
      { Name: 'status'},
      { Name: 'pms'},
    ],

这就是我叫桌子的地方

<Table listHotels={listHotels} selectFilter={selectFilter}></Table>

内部表组件，我能够创建将代表数据的材料UI选择。

但是，我不确定如何基于select选项过滤这些数组，因为如果我有4个select标签过滤器，我将不得不根据所选选项过滤数组。如果我再添加一个选择，逻辑将发生变化，这根本不可重用。

这真的是前端任务，还是应该留给后端？我认为，仅在后端的表上执行一次选择并返回过滤后的数据就更有意义。

Answer 1

您可以选择任一种方式；您想要的是一个显示集。对于每个项目，检查是否符合条件，然后将其添加到显示的内容中：

handleFilterSelected = () => {
  const filters = {
    location: "Whatever",
    priceMin: 0.0,
    priceMax: 100.0
  };
  this.setState({
    filters: filters,
    filteredItems: this.props.items.filter((item) => {
      return item.location === filters.location
        && item.price >= filters.priceMin
        && item.price <= filters.priceMax;
    })
  });
}

render() {
  return (
    <Table>
      <TableBody>
        {this.state.filteredItems.map((item) =>
          <TableRow>
            <TableCell>{item.location}</TableCell>
            <TableCell>{item.price}</TableCell>
          </TableRow>
        )}
      </TableRow>
    </Table>
  );
}

如果您有几百个项目，则可能需要在后端执行此操作。因此，您的组件将调整发送的HTTP URL查询参数，而不是修改显示的项目列表。

如何以可重用的方式为我的material-ui表创建选择过滤器？

1 个答案: