react+antd+CheckableTag实现Tag标签单选或多选功能

1、效果如下图

实现tag标签单选或多选功能

2、环境准备

1、react18

2、antd 4+

3、功能实现

原理: 封装一个受控组件，接受父组件的参数，数据发现变化后，回传给父组件

1、首先，引入CheckableTag组件和useEffect, useMemo, useState钩子：

import { Tag } from 'antd';
import { useEffect, useMemo, useState } from 'react';

const { CheckableTag } = Tag;

2、然后，定义一个状态变量来存储选中的tag：

const [tagsData, setTagsData] = useState<enumItem[]>();

3、组件可接收的props子属性 如下：

•  selectedTagsValues: 父组件传入的标签配置枚举列表
•  value: 已选中的值
•  startIndex：距离左右节点位置，用于是否将左右节点滑动到可视局域
•  onChange： 选中的值发生变化时回调

4、创建一个函数来处理tag的选中和取消选中事件：

  // handelChange，找到所点击项的索引，并把那一项的checked设置为true
  const handleChange = (tag: any, checked: boolean, mode?: string) => {
    if (mode !== 'multiple') {
      onChange?.(checked ? tag : null);
      return;
    }
    const changeData = (value || []).filter(
      (item: any) => item.value !== tag.value,
    );
    if (checked) {
      changeData.push(tag);
    }
    onChange?.(changeData);
  };

 5、最后，使用CheckableTag组件以及tagsData, value值的变化动态来渲染tag列表，并将选中状态和change事件绑定到对应的属性上：

  //遍历
  const dom = useMemo(() => {
    return (
      <div id={uniqueKey} className={clsx(['flex'])}>
        {(tagsData || []).map((tag: any, index: number) => {
          const isHas