如果下拉列表关闭，如何设置默认选中的所有复选框

Question

我使用的是Material UI多选，我的目标是如果关闭下拉列表后没有选中任何复选框，则将所有复选框(包括All(设置为选中
所以，如果没有选择任何内容并且关闭了下拉列表，我希望选中所有复选框。我已经创建了一个名为open的boolean状态，如果下拉列表关闭，它就会触发
我有isAllSelected布尔值，如果全部选中，它也会变为true。这就是我试图通过布尔实现的方式，但有些东西不起作用。演示下面的沙箱链接和代码示例

import React, { useState } from "react";
import InputLabel from "@mui/material/InputLabel";
import Checkbox from "@mui/material/Checkbox";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import { MenuProps, useStyles, options } from "./utils";
function App() {
const [open, setOpen] = React.useState(false);
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const classes = useStyles();
const [selected, setSelected] = useState(options);
const isAllSelected =
options.length > 0 && selected.length === options.length;
const handleChange = (event) => {
const value = event.target.value;
if (value[value.length - 1] === "all" && open) {
setSelected(selected.length === options.length ? [] : options);
return;
}
setSelected(value);
};
console.log("open", open);
console.log("isAllSelected", isAllSelected);
return (
<FormControl className={classes.formControl}>
<InputLabel id="mutiple-select-label">Multiple Select</InputLabel>
<Select
open={open}
onOpen={handleOpen}
onClose={handleClose}
labelId="mutiple-select-label"
multiple
value={selected}
onChange={handleChange}
renderValue={(selected) =>
!isAllSelected ? selected.join(", ") : "alle"
}
MenuProps={MenuProps}
>
<MenuItem
value="all"
classes={{
root: isAllSelected ? classes.selectedAll : ""
}}
>
<ListItemIcon>
<Checkbox
//defaultChecked={!isAllSelected}
classes={{ indeterminate: classes.indeterminateColor }}
checked={!isAllSelected && !open}
indeterminate={
selected.length > 0 && selected.length < options.length
}
/>
</ListItemIcon>
<ListItemText
classes={{ primary: classes.selectAllText }}
primary="Select All"
/>
</MenuItem>
{options.map((option) => (
<MenuItem key={option} value={option}>
<ListItemIcon>
<Checkbox
//defaultChecked
checked={
!isAllSelected && !open ? true : selected.indexOf(option) > -1
}
/>
</ListItemIcon>
<ListItemText primary={option} />
</MenuItem>
))}
</Select>
</FormControl>
);
}
export default App;

Answer 1

我解决了这个问题，通过useEffect更新了setter值。我正在检查下拉列表是否已关闭并且未检查/选择任何内容，然后包装selected数组中的所有元素。
代码和演示沙盒链接

React.useEffect(() => {
if (selected.length < 1 && !open) {
setSelected(options);
}
}, [open, isAllSelected, selected]);

Answer 2

您需要更新复选框的状态，一旦将其更改为默认设置，就可以使用defaultChecked

<input type="checkbox" defaultChecked={this.state.chkbox} onChange={this.handleChangeChk} />