Javascript 带有React&；复选框的筛选表；材料界面

我正在使用&为项目中的数据表构建一个带有复选框的过滤器选项。我不确定哪种方法是实现这一目标的最佳方法

• 是否有使用的自定义解决方案

• 如果没有，实现这一点的方法是什么？我是新来的，所以我很难把所有的部分都放在一起

这是我得到的一些东西：

复选框组件：

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

导入“/filtercheckbox.css”； 从“@material ui/core/Checkbox”导入复选框； 从“@material ui/core/FormControlLabel”导入FormControlLabel； 从“@material ui/core/FormGroup”导入FormGroup； 从“@material ui/core/styles”导入{createMuiTheme，MuiThemeProvider}”； 从“React”导入React； 从“./../store.js”导入{rows}； //主题调色板颜色 const theme=createMuiTheme({ 调色板：{ 初级：{main:“rgb（38118198）”} }, 排版：{useNextVariants:true} }); 类FilterCheckBox扩展React.Component{ 状态={ 查克达：是的， 是的， checkedC:false， 艾德：错， 查克德：错， checkedF:false }; //函数将复选框设置为选中/未选中 handleChange=name=>event=>{ this.setState（{[name]：event.target.checked}）； }; render（）{ 返回( ); } } 导出默认过滤器复选框； 表格组件：

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

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@物料界面/核心/表格”导入表格；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableHead”导入表头；
从“@material ui/core/TableRow”导入TableRow；
从“@material ui/core/Paper”导入纸张；
从“./../store.js”导入{rows}；
const useStyles=makeStyles（主题=>({
根目录：{
宽度：“100%”，
marginTop：主题。间距（3），
overflowX：“自动”
},
表:{
最小宽度：650
}
}));
导出默认函数SimpleTable（）{
const classes=useStyles（）；
返回(
名称
地位
首次提交
最后一项活动
分数
行动
{rows.map（row=>(
{row.name}
{row.status}
{row.firstSubmitted}
{row.lastActivity}
{row.score}
{row.actions}
))}
);
}

您可以找到一个代码示例

---

任何关于构建此功能的方法的帮助都将非常感谢

解决方案可能是将过滤器状态向上移动。这意味着您将用一个prop

onfiltercheckbox:：onChange

替换

onfiltercheckbox:：onChange

。我将您的

filtercheckbox

实现为一个功能组件，因为它没有很多功能

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

现在是将其完全包裹起来的组件。它有

过滤器

状态和您的行数据。将这两者结合起来以筛选表：

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

常量过滤器表=（）=>{
const[filters，setFilters]=React.useState（{}）；
常量filteredRows=行。筛选器（（行）=>{
const filterray=Object.keys（过滤器）；
返回filterArray.every（（filterKey）=>{
返回行[filterKey]==过滤器[filterKey]；
});
});
返回
}