我正在使用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>
);
}
您可以在这里找到一个代码示例。
任何帮助在哪种方式构建这个功能将是真正的感激！
一个解决方案可以是将筛选器状态向上移动。这意味着您将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} />
}
