使用AntDensign的checkbox实现全选功能(一)

复制代码

实现效果

实现逻辑

使用说明

/*

* @Author: wangxinyue

* @Date: 2018-12-28 18:13:04

* @Last Modified by: wangxinyue

* @Last Modified time: 2018-12-28 18:40:34

* groupList 全选的数组集合

* checkboxKey 对象型数组时使用（唯一标识）

* changeCheck 多选框的回调函数返回数据（checked 是否选中, checkedArr选中数组, changeArr变化数组, checkedList选中集合数组, changeList变化集合数组）

* checkboxGroupChild 子元素node

* defaultCheckedArr 默认选中的数组

* selectAllClass 全选样式

* selectAllNode 全选node

*/

复制代码

实现代码

/* * @Author: wangxinyue  * @Date: 2018-12-28 18:13:04  * @Last Modified by: wangxinyue * @Last Modified time: 2018-12-28 18:40:34 * groupList 全选的数组集合 * checkboxKey 对象型数组时使用（唯一标识） * changeCheck 多选框的回调函数返回数据（checked 是否选中, checkedArr选中数组, changeArr变化数组, checkedList选中集合数组, changeList变化集合数组） * checkboxGroupChild 子元素node * defaultCheckedArr 默认选中的数组 * selectAllClass 全选样式 * selectAllNode 全选node */
import React, { Component } from 'react'import { Checkbox } from 'antd';import PropTypes from 'prop-types'
const CheckboxGroup = Checkbox.Group;
class WBYCheckboxGroup extends Component {    static propTypes = {        groupList: PropTypes.array.isRequired,//全选集合        checkboxGroupChild: PropTypes.node.isRequired,//多选框子元素        changeCheck: PropTypes.func,//获取数据变化信息        checkboxKey: PropTypes.string,//多选框的唯一标识        defaultCheckedArr: PropTypes.array//默认选中的数组    }    state = {        checkedArr: [],//当前选中的多选框数组        indeterminate: true,//全选框状态        checkAll: false,//是否全选        lastcheckedArr: [],//上一次选中的多选框数组        allCheckedAll: []//全选数组    };    componentDidMount = () => {        const { defaultCheckedArr = [], checkboxKey, groupList } = this.props        this.setState({            checkedArr: defaultCheckedArr,            lastcheckedArr: defaultCheckedArr,            allCheckedAll: checkboxKey ? groupList.map(one => one[checkboxKey]) : groupList        })    }    //单选操作    onChange = (checkedArr) => {        const { allCheckedAll } = this.state        this.setState({            checkedArr,            lastcheckedArr: checkedArr,            indeterminate: !!checkedArr.length && (checkedArr.length < allCheckedAll.length),            checkAll: checkedArr.length === allCheckedAll.length,        });        this.getChangeObject(checkedArr)    }    //全选操作    onCheckAllChange = (e) => {        const { allCheckedAll } = this.state        const checkedArr = e.target.checked ? allCheckedAll : []        this.setState({            checkedArr: checkedArr,            lastcheckedArr: checkedArr,            indeterminate: false,            checkAll: e.target.checked,        });        this.getChangeObject(checkedArr)    }    //获取并返回变化数据    getChangeObject = (checkedArr) => {        const { changeCheck } = this.props        const { lastcheckedArr } = this.state        let checked = checkedArr.length > lastcheckedArr.length        let changeArr = this.diff(checkedArr, lastcheckedArr)        changeCheck && changeCheck(checked, checkedArr, changeArr, this.getListByArr(checkedArr), this.getListByArr(changeArr))    }    //根据字符串数组返回对象型数组    getListByArr = (arr) => {        const { groupList, checkboxKey } = this.props        return groupList && checkboxKey ? groupList.filter(one => arr.includes(one[checkboxKey])) : []    }    //比较两个数组中不同的元素[1,2,3] [1,2] 返回[3]    diff(arr1, arr2) {        var newArr = [];        var arr3 = [];        for (var i = 0; i < arr1.length; i++) {            if (arr2.indexOf(arr1[i]) === -1)                arr3.push(arr1[i]);        }        var arr4 = [];        for (var j = 0; j < arr2.length; j++) {            if (arr1.indexOf(arr2[j]) === -1)                arr4.push(arr2[j]);        }        newArr = arr3.concat(arr4);        return newArr;
    }    render() {        const { checkboxGroupChild, selectAllClass, selectAllNode = "全选" } = this.props        return (            <div>                <div className={selectAllClass}>                    <Checkbox                        indeterminate={this.state.indeterminate}                        onChange={this.onCheckAllChange}                        checked={this.state.checkAll}>                        {selectAllNode}                    </Checkbox>                </div>                <CheckboxGroup value={this.state.checkedArr} onChange={(checkedValues) => this.onChange(checkedValues, this)}>                    {checkboxGroupChild}                </CheckboxGroup>            </div>        );    }}class Test extends Component {    constructor(props) {        super(props);        this.state = {};    }    changeCheck = (checked, checkedArr, changeArr, checkedList, changeList) => {        console.log("checked", checked,            "checkedArr", checkedArr,            "changeArr", changeArr,            "checkedList", checkedList,            "changeList", changeList);    }    render() {        const defaultcheckedArr = ['pite', 'jiake'];        const plainList = [            { name: "皮特", key: "pite" },            { name: "夹克", key: "jiake" },            { name: "徐子", key: "xuzi" },            { name: "孟获", key: "menghuo" },        ]        return (            <WBYCheckboxGroup                defaultCheckedArr={defaultcheckedArr}                groupList={plainList}                checkboxKey='key'                checkboxGroupChild={plainList.map(one => <Item key={one.key} one={one} />)}                changeCheck={this.changeCheck} />        );    }}
export default Test;class Item extends Component {    constructor(props) {        super(props);        this.state = {};    }    render() {        const { one } = this.props        return (            <div>                <Checkbox value={one.key} />                {one.name}            </div>
        );    }}


复制代码