Using AntDensign’s CheckBox to select all

Copy the code

Implementation effect

Implementation logic

Directions for use

Copy the code

The implementation code

/* * @Author: wangxinyue * @Date: 2018-12-28 18:13:04 * @Last Modified by: wangxinyue * @Last Modified time: * checkboxKey object type array when used (unique identifier) * changeCheck checkbox callback function returns data (checked whether, CheckedArr checks array, changeArr changes array, checkedList checks collection array, ChangeList array of changes) * checkboxGroupChild node * defaultCheckedArr Array selected by default * selectAllClass all-select style * selectAllNode All-select 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,/ / all collection checkboxGroupChild: PropTypes. Node. IsRequired, / / element in multiple frames changeCheck: PropTypes. Func, / / to get the data change information checkboxKey: PropTypes. String,// Unique identifier of multiple checkboxes defaultCheckedArr: PropTypes. Array // Array selected by default} state = {checkedArr: Indeterminate: true,// checkAll: false,// Whether to select lastcheckedArr: [],// allCheckedAll: []// select all array}; 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, }); 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, }); 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), GetListByArr = (arr) => {const {groupList, checkboxKey } = this.props return groupList && checkboxKey ? groupList.filter(one => arr.includes(one[checkboxKey])) : []} // compare two arrays of different elements [1,2,3] [1,2] return [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 = "Future generations" } = 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: "Peter".key: "pite" },            { name: "Jacket".key: "jiake" },            { name: "Xu Zi".key: "xuzi" },            { name: "Meng huo.".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> ); }}Copy the code