带有复选框的过滤器表，带有反应和材料界面

Question

我正在使用React&Material-UI为一个项目中的数据表构建一个带有复选框的筛选选项。我不确定哪种方法是实现这一点的最佳方法。

>

是否有使用Material-UI的自定义解决方案？

如果不是，有什么方法来实现这一点？我是一个新手，所以我很难把所有的碎片放在一起。

这是我得到的东西：

复选框组件：

import "./FilterCheckboxes.css";

import Checkbox from "@material-ui/core/Checkbox";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormGroup from "@material-ui/core/FormGroup";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";

import React from "react";

import { rows } from "../../store.js";

// Theme Palette Colors
const theme = createMuiTheme({
  palette: {
    primary: { main: "rgb(38, 118, 198)" }
  },
  typography: { useNextVariants: true }
});

class FilterCheckboxes extends React.Component {
  state = {
    checkedA: true,
    checkedB: true,
    checkedC: false,
    checkedD: false,
    checkedE: false,
    checkedF: false
  };

  // function to set checkboxes to checked/unchecked
  handleChange = name => event => {
    this.setState({ [name]: event.target.checked });
  };

  render() {
    return (
      <MuiThemeProvider theme={theme}>
        <FormGroup>
          <div className="filter__checkboxes">
            <div className="filter__checkboxes-column">
              <div className="checkboxes">
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={this.state.checkedA}
                      color="primary"
                      onChange={this.handleChange("checkedA")}
                      value="checkedA"
                    />
                  }
                  label="Submitted"
                />
              </div>
              <div className="checkboxes">
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={this.state.checkedB}
                      color="primary"
                      onChange={this.handleChange("checkedB")}
                      value="checkedB"
                    />
                  }
                  label="Invited"
                />
              </div>
            </div>
            <div className="filter__checkboxes-column">
              <div className="checkboxes">
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={this.state.checkedC}
                      color="primary"
                      onChange={this.handleChange("checkedC")}
                      value="checkedC"
                    />
                  }
                  label="Not Submitted"
                />
              </div>
              <div className="checkboxes">
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={this.state.checkedD}
                      color="primary"
                      onChange={this.handleChange("checkedD")}
                      value="checkedD"
                    />
                  }
                  label="Draft"
                />
              </div>
            </div>
            <div className="filter__checkboxes-column">
              <div className="checkboxes">
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={this.state.checkedE}
                      color="primary"
                      onChange={this.handleChange("checkedE")}
                      value="checkedE"
                    />
                  }
                  label="Information Request"
                />
              </div>
              <div className="checkboxes">
                <FormControlLabel
                  control={
                    <Checkbox
                      color="primary"
                      checked={this.state.checkedF}
                      onChange={this.handleChange("checkedF")}
                      value="checkedF"
                    />
                  }
                  label="Loan Application"
                />
              </div>
            </div>
          </div>
        </FormGroup>
      </MuiThemeProvider>
    );
  }
}

export default FilterCheckboxes;

表组件：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";

import { rows } from "../../store.js";

const useStyles = makeStyles(theme => ({
  root: {
    width: "100%",
    marginTop: theme.spacing(3),
    overflowX: "auto"
  },
  table: {
    minWidth: 650
  }
}));

export default function SimpleTable() {
  const classes = useStyles();

  return (
    <Paper className={classes.root}>
      <Table className={classes.table}>
        <TableHead>
          <TableRow>
            <TableCell>Name</TableCell>
            <TableCell align="left">Status</TableCell>
            <TableCell align="left">First Submitted</TableCell>
            <TableCell align="left">Last Activity</TableCell>
            <TableCell align="left">Score</TableCell>
            <TableCell align="left">Actions</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map(row => (
            <TableRow key={row.name}>
              <TableCell align="left">{row.name}</TableCell>
              <TableCell align="left">{row.status}</TableCell>
              <TableCell align="left">{row.firstSubmitted}</TableCell>
              <TableCell align="left">{row.lastActivity}</TableCell>
              <TableCell align="left">{row.score}</TableCell>
              <TableCell align="left">{row.actions}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Paper>
  );
}

您可以在这里找到一个代码示例。

任何帮助在哪种方式构建这个功能将是真正的感激！

Answer 1

一个解决方案可以是将筛选器状态向上移动。这意味着您将filtercheckboxs::onchange替换为适当的onfilterchange。我将filtercheckboxs实现为一个功能组件，因为它没有很多功能。

import React, {Component} from 'react';

const FilterCheckboxes = ({onFilterChanged, checkedA, checkedB, /* ... and so forth or as separate object */}) => {
 return (
      <MuiThemeProvider theme={theme}>
        <FormGroup>
          <div className="filter__checkboxes">
            <div className="filter__checkboxes-column">
              <div className="checkboxes">
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={checkedA}
                      color="primary"
                      onChange={onFilterChanged("checkedA")}
                      value="checkedA"
                    />
                  }
                  label="Submitted"
                />
              </div>

            {/* your other checkboxes */}
            </div>
          </div>
        </FormGroup>
      </MuiThemeProvider>
    );
}

您的simpletable几乎保持不变。唯一的变化是它得到了行作为道具：

export default function SimpleTable({rows}) {
    // your code stays the same except the import of 'store.js'
}

现在是包装它的组件。它具有filters状态和您的行数据。合并这两个以筛选表：

const FilterTable = () => {
    const [filters, setFilters] = React.useState({});

    const filteredRows = rows.filter((row) => {
        const filterArray = Object.keys(filters);

        return filterArray.every((filterKey) => {
            return row[filterKey] == filters[filterKey];
        });
    });

    return <SimpleTable rows={filteredRows} />
}