构建带全选/取消全选功能的 Material-UI 多选下拉框组件

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;

    /**
     * 处理下拉框值变化的事件
     * @param {Object} event - 事件对象
     */
    const handleChange = React.useCallback(event => {
        const value = event.target.value;
        // 检查是否点击了“全选/取消全选”选项
        if (value.length > 0 && value[value.length - 1] === 'all') {
            // 如果当前已全选，则清空所有选项；否则，选中所有选项
            props.onChange(props.value.length === props.options.length ? [] : props.options);
            return;
        }
        // 处理普通选项的选择
        props.onChange(value);
    }, [props.value, props.options, props.onChange]); // 依赖项优化

    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' // 特殊值，用于在handleChange中识别
                    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 }}
                        // 根据isAllSelected状态动态显示“全选”或“取消全选”
                        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;

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

// 使用makeStyles定义组件样式
const useStyles = makeStyles(theme => ({
    formControl: {
        width: '100%' // 使表单控件占据全部宽度
    },
    indeterminateColor: {
        color: '#f50057' // 设置部分选中状态下Checkbox的颜色
    },
    selectAllText: {
        fontWeight: 500 // 设置“全选/取消全选”文本的字体粗细
    },
    selectedAll: {
        '&:hover': {
            backgroundColor: 'rgba(0, 0, 0, 0.08)' // 全选选项hover时的背景色
        },
        backgroundColor: 'rgba(0, 0, 0, 0.08)' // 全选选项的背景色
    }
}));

// 定义下拉菜单的属性
const ITEM_HEIGHT = 48; // 单个菜单项的高度
const ITEM_PADDING_TOP = 8; // 菜单项的顶部内边距
const MenuProps = {
    anchorOrigin: {
        horizontal: 'center',
        vertical: 'bottom' // 下拉菜单的锚点在Select组件的底部中心
    },
    getContentAnchorEl: null, // 确保菜单内容不会基于锚点元素自动定位
    PaperProps: {
        style: {
            maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP, // 设置下拉菜单的最大高度
        }
    },
    transformOrigin: {
        horizontal: 'center',
        vertical: 'top' // 下拉菜单的变换原点在菜单的顶部中心
    },
    variant: 'menu' // 使用菜单变体
};

export { useStyles, MenuProps };

// App.js (示例)
import React, { useState } from 'react';
import MultiSelectWithCheckbox from './MultiSelectWithCheckbox'; // 假设路径正确

function App() {
    const allOptions = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'];
    const [selectedValues, setSelectedValues] = useState([]);

    return (
        <div style={{ padding: '20px', width: '300px' }}>
            <MultiSelectWithCheckbox
                label="选择你的选项"
                options={allOptions}
                value={selectedValues}
                onChange={setSelectedValues}
            />
            <p>当前选中: {selectedValues.join(', ') || '无'}</p>
        </div>
    );
}

export default App;