詳解如何使用React和MUI創(chuàng)建多選Checkbox樹組件

更新時間：2024年01月09日 10:19:32 作者：Evan不懂前端

這篇文章主要為大家詳細介紹了如何使用 React 和 MUI（Material-UI）庫來創(chuàng)建一個多選 Checkbox 樹組件,該組件可以用于展示樹形結構的數(shù)據(jù),并允許用戶選擇多個節(jié)點,感興趣的可以了解下

前提

在開始之前，確保你已經(jīng)安裝了以下依賴：

React
MUI（Material-UI）

最終樣式

非全選狀態(tài)

全選狀態(tài)

思路

我們的目標是創(chuàng)建一個多選 Checkbox 樹組件，它可以接收樹節(jié)點數(shù)據(jù)，并根據(jù)用戶的選擇返回選中的節(jié)點數(shù)據(jù)。為了實現(xiàn)這個目標，我們將按照以下步驟進行：

創(chuàng)建一個 React 函數(shù)組件 CheckBoxTree，它接收一個 data 屬性作為樹節(jié)點數(shù)據(jù)，并可選地接收一個 handleCheckData 屬性作為回調(diào)函數(shù)，用于傳遞選中的節(jié)點數(shù)據(jù)。

在組件的狀態(tài)中，創(chuàng)建一個 selected 數(shù)組，用于存儲選中的節(jié)點的 id。

實現(xiàn)一個 onCheck 函數(shù)，用于處理節(jié)點 Checkbox 的點擊事件。在該函數(shù)中，我們將根據(jù)用戶的選擇更新 selected 數(shù)組，并遞歸處理子節(jié)點的選中狀態(tài)。

實現(xiàn)一個 renderTree 函數(shù)，用于遞歸渲染樹節(jié)點。在該函數(shù)中，我們將根據(jù)節(jié)點的選中狀態(tài)和子節(jié)點的數(shù)量來渲染 Checkbox 和節(jié)點名稱。

使用 TreeView 和 TreeItem 組件來展示樹形結構，并將樹節(jié)點數(shù)據(jù)傳遞給 renderTree 函數(shù)進行渲染。

步驟

下面是實現(xiàn)多選 Checkbox 樹組件的詳細步驟：

1. 創(chuàng)建 React 函數(shù)組件

首先，我們需要創(chuàng)建一個 React 函數(shù)組件 CheckBoxTree，并定義它的屬性和狀態(tài)。代碼如下：

import React from 'react';

interface CheckboxTreeState {
  selected: string[];
}

interface CheckBoxTreeProps {
  data: RegionType[]; //起碼要包含childre，name和parentId，
  handleCheckData?: (data: string[]) => void;
}

export default function CheckBoxTree(props: CheckBoxTreeProps) {
  const { data, handleCheckData } = props;

  const [state, setState] = React.useState<CheckboxTreeState>({
    selected: []
  });

  // ...
}

2. 分割父節(jié)點

接下來，我們定義了splitNodeId函數(shù),用于將節(jié)點id拆分為所有父節(jié)點id。它接受一個節(jié)點id字符串，格式為'1_2_3'，并返回一個父節(jié)點id數(shù)組，例如['1_2', '1']。3表示的是當前節(jié)點。

/**
 * 拆分節(jié)點id為所有父節(jié)點id
 * @param id 節(jié)點id,格式為'1_2_3'
 * @returns 父節(jié)點id數(shù)組,如['1_2', '1']
 */
function splitNodeId(id: string) {
  // 按'_'分割節(jié)點id
  const path = id.split('_');

  // 累加生成父節(jié)點id
  return path.reduce((result: string[], current) => {
    // 拼接'_'和當前節(jié)點
    result.push(`${result.at(-1) ? result.at(-1) + '_' : ''}${current}`);
    return result;
  }, []);
}

3. 實現(xiàn)節(jié)點 Checkbox 的點擊事件處理函數(shù)

接下來，我們需要實現(xiàn)一個 onCheck 函數(shù)，用于處理節(jié)點 Checkbox 的點擊事件。在該函數(shù)中，我們將根據(jù)用戶的選擇更新 selected 數(shù)組，并遞歸處理子節(jié)點的選中狀態(tài)。代碼如下：

const onCheck = (
  event: React.ChangeEvent<HTMLInputElement>,
  node: RegionType,
  parentNodeName?: string
) => {
  const { checked } = event.target;
  const currentId = parentNodeName ?
    `${parentNodeName}_${node.id.id}` :
    node.id.id;
  const parentAreaName = splitNodeId(currentId);

  if (checked) {
    setState((prevState) => ({
      ...prevState,
      selected: Array.from(
        new Set([...prevState.selected, ...parentAreaName])
      )
    }));

    if (node.children && node.children.length > 0) {
      node.children.forEach((item) => {
        onCheck(event, item, currentId);
      });
    }
  } else if (!checked) {
    let tempState = { ...state };

    for (let index = parentAreaName.length - 1; index >= 0; index--) {
      const element = parentAreaName[index];

      if (
        tempState.selected.filter((id) => id.startsWith(`${element}_`))
          .length === 0
      ) {
        tempState = {
          ...tempState,
          selected: tempState.selected.filter((id) => id !== element)
        };
      }

      if (
        tempState.selected.filter((id) => id.startsWith(`${currentId}_`))
          .length !== 0
      ) {
        tempState = {
          ...tempState,
          selected: tempState.selected.filter(
            (id) =>
              !id.startsWith(`${currentId}_`) &&
              !id.startsWith(`${currentId}`)
          )
        };
      }
    }

    setState(tempState);
  }
};

4. 實現(xiàn)遞歸渲染樹節(jié)點的函數(shù)

然后，我們需要實現(xiàn)一個 renderTree 函數(shù)，用于遞歸渲染樹節(jié)點。在該函數(shù)中，我們將根據(jù)節(jié)點的選中狀態(tài)和子節(jié)點的數(shù)量來渲染 Checkbox 和節(jié)點名稱。代碼如下：

const renderTree = (nodes: RegionType, parentNodeName?: string) => {
  let currentLength = 0;

  function getNodeLength(currentNodes: RegionType) {
    currentNodes.children?.forEach((node) => {
      currentLength++;
      if (node.children) {
        getNodeLength(node);
      }
    });
  }

  const currentId = parentNodeName ?
    `${parentNodeName}_${nodes.id.id}` :
    nodes.id.id;

  getNodeLength(nodes);

  return (
    <TreeItem
      key={nodes.id.id}
      nodeId={nodes.id.id}
      label={
        <FormControlLabel
          onClick={(e) => e.stopPropagation()}
          control={
            <Checkbox
              name={nodes.name}
              checked={
                nodes.children &&
                  nodes.children.length &&
                  state.selected.filter((id) =>
                    id.startsWith(`${currentId}_`)
                  ).length === currentLength ||
                state.selected.some((id) => id === currentId)
              }
              indeterminate={
                nodes.children &&
                nodes.children.length > 0 &&
                state.selected.some((id) => id.startsWith(`${currentId}_`)) &&
                state.selected.filter((id) => id.startsWith(`${currentId}_`))
                  .length < currentLength
              }
              onChange={(e) => {
                e.stopPropagation();
                onCheck(e, nodes, parentNodeName);
              }}
              onClick={(e) => e.stopPropagation()}
            />
          }
          label={nodes.name}
        />
      }
    >
      {Array.isArray(nodes.children) ?
        nodes.children.map((node) => renderTree(node, currentId)) :
        null}
    </TreeItem>
  );
};

5. 渲染樹形結構

最后，我們使用 TreeView 和 TreeItem 組件來展示樹形結構，并將樹節(jié)點數(shù)據(jù)傳遞給 renderTree 函數(shù)進行渲染。代碼如下：

return (
  <TreeView
    aria-label="checkbox tree"
    defaultCollapseIcon={<ExpandMore />}
    defaultExpandIcon={<ChevronRight />}
    disableSelection={true}
  >
    {data.map((item) => {
      return renderTree(item);
    })}
  </TreeView>
);

6. 完整代碼

import { ChevronRight, ExpandMore } from '@mui/icons-material';
import { TreeItem, TreeView } from '@mui/lab';
import { Checkbox, FormControlLabel } from '@mui/material';
import React from 'react';

export interface RegionType {
  abbreviation: string;
  children?: RegionType[];
  createdTime: number;
  id: EntityData;
  level: number;
  name: string;
  nameCn: string;
  parentId: string;
  sort: number;
  status: boolean;
}

// 組件狀態(tài)
int
erface CheckboxTreeState {
  // 選中節(jié)點id數(shù)組
  selected: string[];
}

// 組件屬性
interface CheckBoxTreeProps {
  // 樹節(jié)點數(shù)據(jù)
  data: RegionType[];
  // 向外傳遞選擇框數(shù)據(jù)，
  handleCheckData?: (data: string[]) => void;
}

/**
 * 拆分節(jié)點id為所有父節(jié)點id
 * @param id 節(jié)點id,格式為'1_2_3'
 * @returns 父節(jié)點id數(shù)組,如['1_2', '1']
 */
function splitNodeId(id: string) {
  // 按'_'分割節(jié)點id
  const path = id.split('_');

  // 累加生成父節(jié)點id
  return path.reduce((result: string[], current) => {
    // 拼接'_'和當前節(jié)點
    result.push(`${result.at(-1) ? result.at(-1) + '_' : ''}${current}`);
    return result;
  }, []);
}

/**
 * 多選Checkbox樹組件
 * @param props 組件屬性
 * @returns JSX組件
 */
export default function CheckBoxTree(props: CheckBoxTreeProps) {
  // 獲取樹節(jié)點數(shù)據(jù)
  const { data, handleCheckData } = props;

  // 組件狀態(tài):選中節(jié)點id數(shù)組
  const [state, setState] = React.useState<CheckboxTreeState>({
    selected: []
  });

  /**
   * 點擊節(jié)點Checkbox觸發(fā)
   * @param event 事件對象
   * @param node 節(jié)點對象
   * @param parentNodeName 父節(jié)點名稱
   */
  const onCheck = (
    event: React.ChangeEvent<HTMLInputElement>,
    node: RegionType,
    parentNodeName?: string
  ) => {
    // 獲取Checkbox選中狀態(tài)
    const { checked } = event.target;

    // 當前節(jié)點id
    const currentId = parentNodeName ?
      `${parentNodeName}_${node.id.id}` :
      node.id.id;

    // 父節(jié)點id數(shù)組
    const parentAreaName = splitNodeId(currentId);

    // 選中狀態(tài):選中當前節(jié)點和父節(jié)點
    if (checked) {
      setState((prevState) => ({
        ...prevState,
        //使用Set對selected數(shù)組去重
        selected: Array.from(
          new Set([...prevState.selected, ...parentAreaName])
        )
      }));

      // 若有子節(jié)點,遞歸選中
      if (node.children && node.children.length > 0) {
        node.children.forEach((item) => {
          onCheck(event, item, currentId);
        });
      }
    } else if (!checked) {
      // 臨時state
      let tempState = { ...state };

      // 逆序遍歷,進行選中狀態(tài)更新
      for (let index = parentAreaName.length - 1; index >= 0; index--) {
        const element = parentAreaName[index];

        // 若父區(qū)域已無選中節(jié)點,取消選中父區(qū)域
        if (
          tempState.selected.filter((id) => id.startsWith(`${element}_`))
            .length === 0
        ) {
          tempState = {
            ...tempState,
            selected: tempState.selected.filter((id) => id !== element)
          };
        }

        // 取消選中當前區(qū)域
        if (
          tempState.selected.filter((id) => id.startsWith(`${currentId}_`))
            .length !== 0
        ) {
          tempState = {
            ...tempState,
            selected: tempState.selected.filter(
              (id) =>
                !id.startsWith(`${currentId}_`) &&
                !id.startsWith(`${currentId}`)
            )
          };
        }
      }
      // 更新state
      setState(tempState);
    }
  };

  /**
   * 遞歸渲染樹節(jié)點
   * @param nodes 樹節(jié)點數(shù)組
   * @param parentNodeName 父節(jié)點名稱
   * @returns JSX組件
   */
  const renderTree = (nodes: RegionType, parentNodeName?: string) => {
    // 子節(jié)點總數(shù)
    let currentLength = 0;

    /**
     * 獲取子節(jié)點總數(shù)
     * @param currentNodes 當前節(jié)點
     */
    function getNodeLength(currentNodes: RegionType) {
      currentNodes.children?.forEach((node) => {
        currentLength++;
        if (node.children) {
          getNodeLength(node);
        }
      });
    }

    // 當前節(jié)點id
    const currentId = parentNodeName ?
      `${parentNodeName}_${nodes.id.id}` :
      nodes.id.id;

    // 獲取當前節(jié)點子節(jié)點總數(shù)
    getNodeLength(nodes);

    return (
      <TreeItem
        key={nodes.id.id}
        nodeId={nodes.id.id}
        sx={{
          '.MuiTreeItem-label': {
            'maxWidth': '100%',
            'overflow': 'hidden',
            'wordBreak': 'break-all',
            '.MuiFormControlLabel-label': {
              pt: '2px'
            }
          }
        }}
        label={
          <FormControlLabel
            onClick={(e) => e.stopPropagation()}
            sx={{ alignItems: 'flex-start', mt: 1 }}
            control={
              <Checkbox
                name={nodes.name}
                sx={{ pt: 0 }}
                checked={
                  // 若有子節(jié)點,判斷子節(jié)點是否全部選中
                  // 或節(jié)點自身是否選中
                  nodes.children &&
                    nodes.children.length &&
                    state.selected.filter((id) =>
                      id.startsWith(`${currentId}_`)
                    ).length === currentLength ||
                  state.selected.some((id) => id === currentId)
                }
                indeterminate={
                  // 子節(jié)點存在選中與非選中狀態(tài)
                  nodes.children &&
                  nodes.children.length > 0 &&
                  state.selected.some((id) => id.startsWith(`${currentId}_`)) &&
                  state.selected.filter((id) => id.startsWith(`${currentId}_`))
                    .length < currentLength
                }
                onChange={(e) => {
                  e.stopPropagation();
                  onCheck(e, nodes, parentNodeName);
                }}
                onClick={(e) => e.stopPropagation()}
              />
            }
            label={nodes.name}
          />
        }
      >
        {Array.isArray(nodes.children) ?
          nodes.children.map((node) => renderTree(node, currentId)) :
          null}
      </TreeItem>
    );
  };

  /**
   * 組件加載時觸發(fā),獲取去重后的多選框id列表
   */
  React.useEffect(() => {
    // state.selected拆分數(shù)組并合并，返回成一個數(shù)組，如果需要去重后的值，可以使用Array.from(new set)
    const checkBoxList = state.selected.flatMap((item) => item.split('_'));
    // 因為是通過parent id來綁定子元素，所以下面的元素是只返回最后的子元素
    const checkTransferList = checkBoxList.filter(
      (value) => checkBoxList.indexOf(value) === checkBoxList.lastIndexOf(value)
    );

    // 從多選值數(shù)組中生成集合Set,再使用Array.from轉換為數(shù)組
    if (handleCheckData) {
      handleCheckData(checkTransferList);
    }
  }, [state]);

  React.useEffect(() => {
    if (data.length) {
      setState({ selected: [] });
    }
  }, [data]);

  return (
    <TreeView
      aria-label="checkbox tree"
      defaultCollapseIcon={<ExpandMore />}
      defaultExpandIcon={<ChevronRight />}
      disableSelection={true}
    >
      {data.map((item) => {
        return renderTree(item);
      })}
    </TreeView>
  );
}

總結

通過以上步驟，我們成功地創(chuàng)建了一個多選 Checkbox 樹組件。該組件可以接收樹節(jié)點數(shù)據(jù)，并根據(jù)用戶的選擇返回選中的節(jié)點數(shù)據(jù)。我們使用了 React 和 MUI（Material-UI）庫來實現(xiàn)這個功能，并按照前提、思路和步驟的順序進行了解析和實現(xiàn)。

以上就是詳解如何使用React和MUI創(chuàng)建多選Checkbox樹組件的詳細內(nèi)容，更多關于React MUI創(chuàng)建多選Checkbox樹組件的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: