CardCheck.jsx

import React, { useState, useEffect } from 'react';
import { Checkbox } from 'antd';
import styles from './PushTest.less';
const CheckboxGroup = Checkbox.Group;

const CardCheck = props => {
  const { cardMsg, cardIndex, callback } = props;
  const [checkedList, setCheckedList] = useState();
  const [indeterminate, setIndeterminate] = useState(false);
  const [checkAll, setCheckAll] = useState(false);

  const [plainOptions, setPlainOptions] = useState([]);

  useEffect(() => {
    setPlainOptions(cardMsg.plainOptions);
  }, []);
  useEffect(() => {
    callback(checkedList, cardIndex);
  }, [checkedList]);
  const onChange = list => {
    console.log(list);
    setCheckedList(list);
    setIndeterminate(!!list.length && list.length < plainOptions.length);
    setCheckAll(list.length === plainOptions.length);
  };
  const onCheckAllChange = e => {
    setCheckedList(
      e.target.checked ? plainOptions.map(item => item.value) : [],
    );
    setIndeterminate(false);
    setCheckAll(e.target.checked);
  };
  return (
    <div className={styles.divBox}>
      <div className={styles.topCheckbox}>
        <Checkbox
          indeterminate={indeterminate}
          onChange={e => onCheckAllChange(e)}
          checked={checkAll}
        >
          {cardMsg.groupName}
        </Checkbox>
      </div>
      <div className={styles.bottomCheckbox} style={{ marginTop: '10px' }}>
        <CheckboxGroup
          options={plainOptions}
          value={checkedList}
          onChange={list => onChange(list)}
        />
      </div>
    </div>
  );
};

export default CardCheck;