react antd checkbox实现全选、多选功能

<Checkbox
  indeterminate={indeterminate}
  checked={checkAll}
  onChange={handleClickAllCheckbox}
>
  全选
</Checkbox>
const renderPanelItem = () => {
  return caseList?.map((item: CaseItem) => {
    const key = item.replay_id;
    const isChecked = selectedRowKeys?.includes(item.task_record_id); // 判断是否勾选
    return (
      <Panel
        header={
          <>
            <Checkbox
              style={{ marginRight: 5 }}
              onChange={(e) => {
                e.stopPropagation();
                handleClickItemCheckbox(isChecked, item.task_record_id);
              }}
              checked={isChecked} // 视图
            />
            <CloseCircleTwoTone twoToneColor="#f5222d" style={{ marginRight: 5 }} />
            <span>{item.task_case_name}</span>
          </>
        }
        key={key}
        extra={renderPanelExtra(item)}
      >
      // ...
      </Panel>
    );
  });
};

  const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]); // 勾选的每一行数据的id集合
  const [indeterminate, setIndeterminate] = useState(false); // 【全选】checkbox
  const [checkAll, setCheckAll] = useState(false); // 【全选】checkbox

  const handleClickAllCheckbox = () => {
    if (!checkAll) {
      setSelectedRowKeys(
        Array.from(new Set([...selectedRowKeys, ...(caseList?.map((item: CaseItem) => item.task_record_id) || [])])),
      );
    } else {
      setSelectedRowKeys([]);
    }
    setCheckAll(!checkAll);
    setIndeterminate(false); // 全选/全不选的indeterminate为false，部分选上才为true
  };

// 获取当前页已勾选的keys
const getCurrentCheckedList = (allKeys: number[], allData: CaseItem[]) => {
  const current: number[] = [];
  allKeys?.forEach((checkedId) => {
    allData?.forEach((c: CaseItem) => {
      if (c.task_record_id === checkedId) {
        current.push(checkedId);
      }
    });
  });
  return current;
};
// 点击每一项数据前面checkbox时
const handleClickItemCheckbox = (isChecked: boolean, taskRecordId: number) => {
  let keys;
  if (isChecked) {
    keys = selectedRowKeys.filter((id) => id !== taskRecordId);
  } else {
    keys = [...selectedRowKeys, taskRecordId];
  }
  setSelectedRowKeys(keys);
  // 更新全选checkbox的状态值
  const current = getCurrentCheckedList(keys, caseList);
  setCheckAll(current?.length === limit); // limit表示每一页展示的数量，checkAll是否为true也只是针对当前页来说
  setIndeterminate(!!current.length && current.length < limit);
};

        // 当翻页时，初始化【全选】选项
        const currentPageCheckedList = getCurrentCheckedList(selectedRowKeys, resp_list); // resp_list表示接口返回的数据
        setCheckAll(currentPageCheckedList?.length === limit);
        setIndeterminate(!!currentPageCheckedList.length && currentPageCheckedList.length < limit);