Question

您好，我尝试根据以下代码过滤具有多个复选框的数组：React How to Filter Data Array using Multiple Checkbox

该示例使用一个过滤器，我想实现三个不同的过滤器系统。它们全都根据我放入filter方法中的运算符单独或一起计算。如何使它们彼此交互并正确过滤数据。谢谢您的帮助。

https://codesandbox.io/s/elastic-williams-gubr5?file=/src/App.js

Answer 1

我为您尝试做的事情创建了working example。看看：

import React, { useState } from "react";
import {
  Container,
  Grid,
  Card,
  Typography,
  FormControl,
  Checkbox,
  FormGroup,
  FormControlLabel,
  TextField
} from "@material-ui/core";

const apartmentData = [
  {
    title: "Unit 1",
    rooms: "1",
    building: "A",

    sqFt: "400"
  },
  {
    title: "Unit 2",
    rooms: "1",
    building: "A",
    sqFt: "500"
  },
  {
    title: "Unit 3",
    rooms: "1",
    building: "A",
    sqFt: "600"
  },
  { title: "Unit 4", rooms: "2", building: "A" },
  {
    title: "Unit 5",
    rooms: "2",
    building: "A",
    sqFt: "400"
  },
  {
    title: "Unit 6",
    rooms: "1",
    building: "B",
    sqFt: "600"
  },
  {
    title: "Unit 7",
    rooms: "1",
    building: "B",
    sqFt: "600"
  }
];

const apartment = [{ roomsLabel: "1" }, { roomsLabel: "2" }];
const edifice = [{ buildingLabel: "A" }, { buildingLabel: "B" }];
const SquareFeets = [
  { sqFtLabel: "400" },
  { sqFtLabel: "500" },
  { sqFtLabel: "600" }
];

const FilterMethod01 = () => {
  const [rooms, setRooms] = useState([]);
  const [building, setBuilding] = useState([]);
  const [sqFt, setSqFt] = useState([]);

  console.log(rooms, building, sqFt);

  const filteredUnits =
    rooms.length || building.length || sqFt.length
      ? apartmentData.filter((apartment) => {
          console.log("filtering", apartment);
          return (
            (!rooms.length || rooms.includes(apartment.rooms)) &&
            (!building.length || building.includes(apartment.building)) &&
            (!apartment.sqFt || !sqFt.length || sqFt.includes(apartment.sqFt))
          );
        })
      : apartmentData;

  return (
    <Container>
      <TextField value={(rooms, building, sqFt)} fullWidth />
      <FormControl>
        <FormGroup>
          {apartment.map((apartment, i) => (
            <FormControlLabel
              key={i}
              control={
                <Checkbox
                  onChange={(event) =>
                    setRooms((prev) =>
                      event.target.checked
                        ? [...prev, apartment.roomsLabel]
                        : []
                    )
                  }
                />
              }
              label={apartment.roomsLabel}
              value={apartment.roomsLabel}
            />
          ))}
        </FormGroup>
      </FormControl>

      <FormControl>
        <FormGroup>
          {edifice.map((e, i) => (
            <FormControlLabel
              key={i}
              control={
                <Checkbox
                  onChange={(event) =>
                    setBuilding((prev) =>
                      event.target.checked ? [...prev, e.buildingLabel] : []
                    )
                  }
                />
              }
              label={e.buildingLabel}
              value={e.buildingLabel}
            />
          ))}
        </FormGroup>
      </FormControl>

      <FormControl>
        <FormGroup>
          {SquareFeets.map((s, i) => (
            <FormControlLabel
              key={i}
              control={
                <Checkbox
                  onChange={(event) =>
                    setSqFt((prev) =>
                      event.target.checked ? [...prev, s.sqFtLabel] : []
                    )
                  }
                />
              }
              label={s.sqFtLabel}
              value={s.sqFtLabel}
            />
          ))}
        </FormGroup>
      </FormControl>
      <Grid
        style={{ paddingTop: "100px" }}
        container
        direction="row"
        justify="flex-start"
        alignItems="center"
        spacing={30}
      >
        {filteredUnits.map((apartment, index) => (
          <Card
            style={{
              background: "lightgray",
              marginBottom: "2px",
              width: "400px",
              padding: "20px"
            }}
          >
            <Typography gutterBottom variant="h4">
              {apartment.title}
            </Typography>
            <Typography gutterBottom variant="h6">
              rooms: {apartment.rooms}
            </Typography>
            <Typography gutterBottom variant="h6">
              building: {apartment.building}
            </Typography>
            <Typography gutterBottom variant="h6">
              SqFt: {apartment.sqFt}
            </Typography>
          </Card>
        ))}
      </Grid>
    </Container>
  );
};

export default FilterMethod01;

使用多个复选框过滤器做出反应

1 个答案: