在Material-UI中构建带全选/全不选功能的复选框多选组件

const isAllSelected = props.options.length > 0 && props.value.length === props.options.length;

const handleChange = React.useCallback(event => {
    const value = event.target.value;
    // 检查用户是否点击了“全选”选项（我们将其value设置为'all'）
    if (value[value.length - 1] === 'all') {
        // 如果当前已全选，则清空所有选中项（实现“全不选”）
        // 否则，选中所有选项（实现“全选”）
        props.onChange(props.value.length === props.options.length ? [] : props.options);
        return; // 处理完全选/全不选后直接返回
    }
    // 对于普通选项的选择，直接更新选中值
    props.onChange(value);
}, [props.value, props.options]); // 依赖项中加入props.options确保逻辑正确

<ListItemText
    classes={{ primary: classes.selectAllText }}
    primary={isAllSelected ? 'Uncheck all' : 'Check all'} // 根据isAllSelected动态改变文本
/>

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme => ({
    formControl: {
        width: '100%'
    },
    indeterminateColor: {
        color: '#f50057' // 自定义半选状态的颜色
    },
    selectAllText: {
        fontWeight: 500
    },
    selectedAll: {
        '&:hover': {
            backgroundColor: 'rgba(0, 0, 0, 0.08)'
        },
        backgroundColor: 'rgba(0, 0, 0, 0.08)'
    }
}));

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
    anchorOrigin: {
        horizontal: 'center',
        vertical: 'bottom'
    },
    getContentAnchorEl: null,
    PaperProps: {
        style: {
            maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
        }
    },
    transformOrigin: {
        horizontal: 'center',
        vertical: 'top'
    },
    variant: 'menu'
};

export { useStyles, MenuProps };

import React from 'react';
import { Checkbox, InputLabel, ListItemIcon, ListItemText, MenuItem, FormControl, Select } from '@material-ui/core';
import { MenuProps, useStyles } from './multiSelectWithCheckboxUtil';

function MultiSelectWithCheckbox(props) {
    const classes = useStyles();
    // 判断是否所有选项都被选中
    const isAllSelected = props.options.length > 0 && props.value.length === props.options.length;

    const handleChange = React.useCallback(event => {
        const value = event.target.value;
        // 如果点击的是“全选”/“全不选”选项
        if (value[value.length - 1] === 'all') {
            // 根据当前是否已全选来决定是清空还是选中所有
            props.onChange(props.value.length === props.options.length ? [] : props.options);
            return;
        }
        // 处理普通选项的选择
        props.onChange(value);
    }, [props.value, props.options]); // 确保依赖项完整

    return (
        <FormControl className={classes.formControl}>
            <InputLabel id='mutiple-select-label' style={{fontSize: 18}}>{props.label}</InputLabel>
            <Select
                labelId='mutiple-select-label'
                multiple // 启用多选模式
                value={props.value}
                onChange={handleChange}
                // 自定义选中项的显示方式
                renderValue={React.useCallback(selected => selected.join(', '), [])}
                MenuProps={MenuProps} // 应用自定义菜单属性
            >
                {/* “全选”/“全不选”选项 */}
                <MenuItem
                    value='all'
                    classes={{
                        root: isAllSelected ? classes.selectedAll : '', // 应用全选时的样式
                    }}
                >
                    <ListItemIcon>
                        <Checkbox
                            classes={{
                                indeterminate: classes.indeterminateColor, // 自定义半选颜色
                            }}
                            checked={isAllSelected} // 复选框状态：是否全选
                            // 半选状态：部分选中但未全选
                            indeterminate={props.value.length > 0 && props.value.length < props.options.length}
                        />
                    </ListItemIcon>
                    <ListItemText
                        classes={{ primary: classes.selectAllText }}
                        primary={isAllSelected ? 'Uncheck all' : 'Check all'} // 动态显示标签
                    />
                </MenuItem>
                {/* 遍历渲染所有可选项目 */}
                {props.options.map(option => (
                    <MenuItem key={option} value={option}>
                        <ListItemIcon>
                            <Checkbox checked={props.value.indexOf(option) > -1} /> {/* 单个选项的选中状态 */}
                        </ListItemIcon>
                        <ListItemText primary={option} />
                    </MenuItem>
                ))}
            </Select>
        </FormControl>
    );
}

export default MultiSelectWithCheckbox;