快捷導(dǎo)航

react antd checkbox實現(xiàn)全選、多選功能

更新時間：2024年07月11日 10:28:43 作者：a堅強的泡沫

目前好像只有table組件有實現(xiàn)表格數(shù)據(jù)的全選功能,如果說對于list,card,collapse等其他組件來說,需要自己結(jié)合checkbox來手動實現(xiàn)全選功能,這篇文章主要介紹了react antd checkbox實現(xiàn)全選、多選功能,需要的朋友可以參考下

背景

目前好像只有table組件有實現(xiàn)表格數(shù)據(jù)的全選功能，如果說對于list，card，collapse等其他組件來說，需要自己結(jié)合checkbox來手動實現(xiàn)全選功能。

Checkbox.Group有實現(xiàn)全選功能，但是對于需要遍歷出來的數(shù)據(jù)（接口動態(tài)返回），這種方式不太可行。

方案

考慮都使用checkbox組件來實現(xiàn)，同時增加狀態(tài)管理。

1、增加一個【全選】checkbox，同時遍歷每一行數(shù)據(jù)的時候，為Panel組件的header屬性添加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>
    );
  });
};

2、增加需要的狀態(tài)

  const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]); // 勾選的每一行數(shù)據(jù)的id集合
  const [indeterminate, setIndeterminate] = useState(false); // 【全選】checkbox
  const [checkAll, setCheckAll] = useState(false); // 【全選】checkbox

3、當點擊【全選】checkbox的時候

全部勾選：把當前頁的item.id和已有的selectedRowKeys一起存起來，注意id去重
取消全部勾選：setSelectedRowKeys([])
同時改變checkAll的狀態(tài)

  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
  };

4、當點擊【每一行數(shù)據(jù)的checkbox】的時候

首選需要判斷該行數(shù)據(jù)是否已經(jīng)被勾選上：const isChecked = selectedRowKeys?.includes(item.task_record_id);
如果已經(jīng)被勾選上了，說明需要取消勾選，則從selectedRowKeys去除掉該id；否則，為selectedRowKeys添加上該id。
考慮分頁的時候，selectedRowKeys需要存放上一頁已勾選的id 和當前頁已勾選的id
然后再用當前頁已勾選的id列表去判斷 checkAll 和 indeterminate【全選checkbox】的狀態(tài)值

// 獲取當前頁已勾選的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;
};
// 點擊每一項數(shù)據(jù)前面checkbox時
const handleClickItemCheckbox = (isChecked: boolean, taskRecordId: number) => {
  let keys;
  if (isChecked) {
    keys = selectedRowKeys.filter((id) => id !== taskRecordId);
  } else {
    keys = [...selectedRowKeys, taskRecordId];
  }
  setSelectedRowKeys(keys);
  // 更新全選checkbox的狀態(tài)值
  const current = getCurrentCheckedList(keys, caseList);
  setCheckAll(current?.length === limit); // limit表示每一頁展示的數(shù)量，checkAll是否為true也只是針對當前頁來說
  setIndeterminate(!!current.length && current.length < limit);
};

另外，在進行翻頁請求數(shù)據(jù)的時候，需要對當前頁的checkAll狀態(tài)值進行判斷，并初始化

        // 當翻頁時，初始化【全選】選項
        const currentPageCheckedList = getCurrentCheckedList(selectedRowKeys, resp_list); // resp_list表示接口返回的數(shù)據(jù)
        setCheckAll(currentPageCheckedList?.length === limit);
        setIndeterminate(!!currentPageCheckedList.length && currentPageCheckedList.length < limit);

效果圖：