【React 】基于Antd Design的CheckBox多选框组件封装

一、简介

基于项目需求，对Ant Design中CheckBox复选框组件进行了二次封装，主要有以下一些功能：

【a】可直接使用数据库常量表的标识，使用sign标识从后台查询数据源时，以'DMK_'加上对应代码库标识，如：sign={'DMK_XTGL_WJLX'}；

【b】支持自定义数据源，需要遵循一定的格式，如： [{label: 'A', value: 'A'},{label: 'B', value: 'B'},{label: 'C', value: 'C'}]；

【c】使用checkBoxGroupDisabled属性可动态配置整个复选框禁用、启用状态；

【d】使用checkBoxDisabledValueArr属性可控制按钮组中哪些checkbox需要被禁用；

【e】使用filterType集合filterData可以过滤指定按钮, 如: filterType={'save'} filterData={['A']}；

【f】使用columnsNum属性可控制一行显示几个复选框,不传默认显示4个, 取值范围: [1,2,3,4,6,8]；

 

二、NHCheckBox.js

import React from "react";
import PropTypes from "prop-types";
import {NHFetch} from "xgui-for-react";
import {Checkbox, Col, Row} from 'antd';

const pathUrl = "/proData/selectDataList";
const CheckboxGroup = Checkbox.Group;

/**
 * @Description: Checkbox多选框组件
 * @author weishihuai
 * @date 2019/3/19 11:00
 *
 * 说明:
 * 1. 使用sign标识从后台查询数据源时，以'DMK_'加上对应代码库标识,如: sign={'DMK_WJCF_WJLX'};
 * 2. 使用自定义数据源时,需注意格式. 如: [{label: 'A', value: 'A'},{label: 'B', value: 'B'},{label: 'C', value: 'C'}];
 * 3. 使用checkBoxGroupDisabled属性可动态配置整个复选框禁用、启用状态;
 * 4. 使用checkBoxDisabledValueArr属性可控制按钮组中哪些checkbox需要被禁用;
 * 5. 使用filterType集合filterData可以过滤指定按钮, 如: filterType={'save'} filterData={['A']};
 * 6. 使用columnsNum属性可控制一行显示几个复选框,不传默认显示4个, 取值范围: [1,2,3,4,6,8];
 *
 * 使用示例:
    <NHCheckBox sign={'DMK_XTGL_WJLX'}
                checkBoxGroupDisabled={false}
                defaultValue={['Apple']}
                onChange={this.onChange}
                columnsNum={1}
                dataSource={[
                            {label: 'A', value: 'A'},
                            {label: 'B', value: 'B'},
                            {label: 'C', value: 'C'},
                              ]}
                filterType={'remove'}
                filterData={['A']}
                checkBoxDisabledValueArr={['A', 'B']}
    />
 *
 */
class NHCheckBox extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            data: [],
        }
    }

    //默认属性
    static defaultProps = {
        checkBoxGroupDisabled: false,    //按钮组启用/禁用状态
        checkBoxDisabledValueArr: [],    //需要禁用的复选框的值(数组)
        columnsNum: 4,                   //每行需要显示的复选框数量
    };

    componentDidMount() {
        const {sign} = this.props;
        this.getDataSource(sign);
    }

    UNSAFE_componentWillReceiveProps(nextProps) {
        if ('dataSource' in nextProps) {
            const dataSource = nextProps.dataSource;
            this.setState({
                data: dataSource
            });
        }
    }

    //根据数据源标识从后台查询DataSource
    getDataSource = (sign) => {
        if (!sign) {
            this.getCustomDataSource();
        } else {
            NHFetch(pathUrl, 'GET', {sign: sign})
                .then(res => {
                    if (res) {
                        let data = res.data;
                        if (data) {
                            this.setState({
                                data: [...data]
                            });
                        } else {
                            this.getCustomDataSource();
                        }
                    }
                });
        }
    };

    //使用自定义的DataSource
    getCustomDataSource = () => {
        const {dataSource = []} = this.props;
        if (dataSource && dataSource.length > 0) {
            this.setState({
                data: [...dataSource]
            });
        }
    };

    //变化时回调函数
    onCheckBoxChange = (checkedValues) => {
        const {onChange} = this.props;
        if (onChange && typeof onChange === 'function') {
            onChange(checkedValues);
        }
    };

    //检查复选框是否需要禁用
    isCheckBoxIsDisabled = (checkBoxDisabledValueArr, value) => {
        if (checkBoxDisabledValueArr && checkBoxDisabledValueArr.length <= 0) {
            return false;
        }
        let val = checkBoxDisabledValueArr.find((key) => {
            return value === key || value === key
        });
        return val !== undefined;
    };

    //组装CheckBox Options
    buildCheckBoxOptions = (columnsNum, filteredData, checkBoxDisabledValueArr) => {
        let spanNum = 24 / columnsNum;
        return filteredData.map(option => <Col span={spanNum}><Checkbox
            key={option.VALUE || option.value}
            disabled={this.isCheckBoxIsDisabled(checkBoxDisabledValueArr, option.VALUE || option.value)}
            value={option.VALUE || option.value}>{option.LABEL || option.label}</Checkbox></Col>)
    };

    render() {
        const {data = []} = this.state;
        const {checkBoxGroupDisabled, defaultValue, checkBoxDisabledValueArr = [], filterType = '', filterData = [], columnsNum = 4} = this.props;
        let checkBoxOptions = [];

        //同时指定过滤类型和需要过滤的数据VALUE
        if (filterType && filterData) {
            switch (filterType) {
                case 'remove': { //过滤掉指定key的复选框
                    let filteredData = data.filter((item) => {
                        let itemVal = item.VALUE || item.value;
                        let isExist = filterData.find((val) => {
                            return val === itemVal;
                        });
                        return isExist === undefined;
                    });
                    if (filteredData && filteredData.length > 0) {
                        checkBoxOptions = this.buildCheckBoxOptions(columnsNum, filteredData, checkBoxDisabledValueArr);
                    }
                    break;
                }
                case 'save': { //保留指定key值的复选框
                    let filteredData = data.filter((item) => {
                        let itemVal = item.VALUE || item.value;
                        let isExist = filterData.find((val) => {
                            return val === itemVal;
                        });
                        return isExist !== undefined;
                    });
                    if (filteredData && filteredData.length > 0) {
                        checkBoxOptions = this.buildCheckBoxOptions(columnsNum, filteredData, checkBoxDisabledValueArr);
                    }
                    break;
                }
                default: {
                    checkBoxOptions = this.buildCheckBoxOptions(columnsNum, data, checkBoxDisabledValueArr);
                    break;
                }
            }
        } else {
            //不进行数据过滤
            checkBoxOptions = this.buildCheckBoxOptions(columnsNum, data, checkBoxDisabledValueArr);
        }
        return (
            <div>
                <CheckboxGroup style={{width: '100%'}} onChange={this.onCheckBoxChange} disabled={checkBoxGroupDisabled}
                               defaultValue={defaultValue}>
                    <Row>
                        {checkBoxOptions}
                    </Row>
                </CheckboxGroup>
            </div>
        )
    }
}

//属性检查
NHCheckBox.propTypes = {
    sign: PropTypes.string,                             //数据源标识
    dataSource: PropTypes.arrayOf(                      //自定义数据源
        PropTypes.shape({
            value: PropTypes.string,
            label: PropTypes.node
        })
    ),
    checkBoxGroupDisabled: PropTypes.bool,              //整个多选框按钮组启用/禁用状态
    defaultValue: PropTypes.array,                      //默认选中的选项
    onChange: PropTypes.func,                           //选项变化时的回调函数
    checkBoxDisabledValueArr: PropTypes.array,          //需要禁用的复选框Value集合
    filterType: PropTypes.oneOf(['save', 'remove']),    //过滤数据类型,save - 保留  remove - 移除
    filterData: PropTypes.array,                        //过滤数据, save - 保留指定的filterData remove - 移除指定的filterData
    columnsNum: PropTypes.oneOf([1, 2, 3, 4, 6, 8])     //每行显示复选框的个数,默认为4个
};

export default NHCheckBox;

 

三、测试

<NHCheckBox sign={'DMK_XTGL_WJLX'} checkBoxGroupDisabled={false}
                                    /*defaultValue={['.doc']}*/
                                    onChange={this.onChange}
                                    columnsNum={4}
                            /*dataSource={[
                                {label: 'A', value: 'A'},
                                {label: 'B', value: 'B'},
                                {label: 'C', value: 'C'},
                            ]}*/
                                    filterType={'remove'}
                                    filterData={['.png']}
                                    checkBoxDisabledValueArr={['.excel', '.ISO']}
                        />

文件类型常量信息：

可以看到，ISO以及excel选项被禁用，以及png被过滤了，还有每行显示4个多选框。以上就是关于CheckBox组件的二次封装以及一些使用方法，具体根据项目需求增加、减少配置就行了。