devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：很楠不爱3 | 2024-02-13 09:48:56

赞

踩

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

1、效果如下图

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

2、环境准备

1、react18

2、antd 4+

3、功能实现

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

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

  1. import { Tag } from 'antd';
  2. import { useEffect, useMemo, useState } from 'react';
  3.  
  4. const { CheckableTag } = Tag;

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

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

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

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

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

  1.   // handelChange，找到所点击项的索引，并把那一项的checked设置为true
  2.   const handleChange = (tag: any, checked: boolean, mode?: string) => {
  3.     if (mode !== 'multiple') {
  4.       onChange?.(checked ? tag : null);
  5.       return;
  6.     }
  7.     const changeData = (value || []).filter(
  8.       (item: any) => item.value !== tag.value,
  9.     );
  10.     if (checked) {
  11.       changeData.push(tag);
  12.     }
  13.     onChange?.(changeData);
  14.   };

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

  1.   //遍历
  2.   const dom = useMemo(() => {
  3.     return (
  4.       <div id={uniqueKey} className={clsx(['flex'])}>
  5.         {(tagsData || []).map((tag: any, index: number) => {
  6.           const isHasSelectedTag = isSelectedTag(tag?.value, value);
  7.           return (
  8.             // eslint-disable-next-line react/jsx-key
  9.             <div className={clsx(['self-check-tag'])} key={index}>
  10.               <CheckableTag
  11.                 key={tag.value}
  12.                 checked={tag.checked || isHasSelectedTag}
  13.                 onClick={(e: any) => {
  14.                   scrollIntoViewHandle(
  15.                     e.target?.parentElement?.parentElement?.parentElement
  16.                       ?.childNodes,
  17.                     index,
  18.                     tagsData?.length || 0,
  19.                   );
  20.                 }}
  21.                 onChange={(checked) => {
  22.                   handleChange(tag, checked, mode);
  23.                 }}
  24.               >
  25.                 <div className={clsx([mode === 'multiple' ? 'cur' : ''])}>
  26.                   {tag.label}
  27.                   {tag.checked || isHasSelectedTag ? <i></i> : ''}
  28.                 </div>
  29.               </CheckableTag>
  30.             </div>
  31.           );
  32.         })}
  33.       </div>
  34.     );
  35.   }, [tagsData, value]);

6、完整代码如下：

  1. /**
  2.  * 公共组件：标签组件
  3.  */
  4. import { Tag } from 'antd';
  5. import clsx from 'clsx';
  6. import { useEffect, useMemo, useState } from 'react';
  7. import './index.less';
  8.  
  9. const { CheckableTag } = Tag;
  10.  
  11. type enumItem = {
  12.   label: string;
  13.   value: string;
  14. };
  15. // 距离左右节点的位置的默认值，决定开始、结束节点是否滚到可视区域
  16. const START_INDEX = 3;
  17.  
  18. /**
  19.  * 标签属性配置
  20.  * selectedTagsValues: 可选中的标签配置选项
  21.  * uniqueKey：组件唯一标识key
  22.  * value: 已选中的值
  23.  * startIndex：距离左右节点位置，用于是否将左右节点滑动到可视局域
  24.  * onChange： 选中的值发生变化时回调
  25.  */
  26. interface SelectTagProps {
  27.   selectedTagsValues: enumItem[];
  28.   uniqueKey?: string;
  29.   value?: any;
  30.   startIndex?: number;
  31.   mode?: string;
  32.   onChange?: (values: any) => void;
  33. }
  34.  
  35. const SelectTag = (props: SelectTagProps) => {
  36.   const { selectedTagsValues, uniqueKey, value, startIndex, mode, onChange } =
  37.     props;
  38.   const [tagsData, setTagsData] = useState<enumItem[]>();
  39.  
  40.   // 点击tag 跳到对应的可视区域
  41.   const scrollIntoViewHandle = (node: any, index: number, tagLen: number) => {
  42.     const scrollIndex =
  43.       startIndex || Math.min(START_INDEX, Math.floor(tagLen / 2));
  44.     if (tagLen > 0 && index < scrollIndex) {
  45.       node?.[0]?.scrollIntoView({
  46.         behavior: 'smooth',
  47.         block: 'start',
  48.         inline: 'start',
  49.       });
  50.       return;
  51.     }
  52.     if (tagLen > 0 && tagLen - index <= scrollIndex) {
  53.       node?.[tagLen - 1]?.scrollIntoView({
  54.         behavior: 'smooth',
  55.         block: 'start',
  56.         inline: 'start',
  57.       });
  58.       return;
  59.     }
  60.     node?.[index]?.scrollIntoView({
  61.       behavior: 'smooth',
  62.       block: 'center',
  63.       inline: 'center',
  64.     });
  65.   };
  66.  
  67.   useEffect(() => {
  68.     setTagsData(selectedTagsValues);
  69.   }, [selectedTagsValues]);
  70.  
  71.   useEffect(() => {
  72.     // 若枚举过长，可考虑传入一个uniqueKey，自动调到指定位置
  73.     if (uniqueKey && value) {
  74.       const index: number = (tagsData || []).findIndex(
  75.         (item: any) => item.value && item?.value === value?.value,
  76.       );
  77.       if (index > -1 && document.getElementById(uniqueKey)) {
  78.         setTimeout(() => {
  79.           scrollIntoViewHandle(
  80.             document.getElementById(uniqueKey)?.childNodes,
  81.             index,
  82.             tagsData?.length || 0,
  83.           );
  84.         }, 100);
  85.       }
  86.     }
  87.   }, [value]);
  88.  
  89.   // handelChange，找到所点击项的索引，并把那一项的checked设置为true
  90.   const handleChange = (tag: any, checked: boolean, mode?: string) => {
  91.     if (mode !== 'multiple') {
  92.       onChange?.(checked ? tag : null);
  93.       return;
  94.     }
  95.     const changeData = (value || []).filter(
  96.       (item: any) => item.value !== tag.value,
  97.     );
  98.     if (checked) {
  99.       changeData.push(tag);
  100.     }
  101.     onChange?.(changeData);
  102.   };
  103.  
  104.   // tag是否选中
  105.   const isSelectedTag = (tagValue: string, value: any) => {
  106.     if (mode === 'multiple') {
  107.       if (Array.isArray(value) && value.length) {
  108.         const findIndex = value.findIndex((item) => item?.value === tagValue);
  109.         return findIndex > -1;
  110.       }
  111.       return false;
  112.     }
  113.     return tagValue === value?.value;
  114.   };
  115.  
  116.   //遍历
  117.   const dom = useMemo(() => {
  118.     return (
  119.       <div id={uniqueKey} className={clsx(['flex'])}>
  120.         {(tagsData || []).map((tag: any, index: number) => {
  121.           const isHasSelectedTag = isSelectedTag(tag?.value, value);
  122.           return (
  123.             // eslint-disable-next-line react/jsx-key
  124.             <div className={clsx(['self-check-tag'])} key={index}>
  125.               <CheckableTag
  126.                 key={tag.value}
  127.                 checked={tag.checked || isHasSelectedTag}
  128.                 onClick={(e: any) => {
  129.                   scrollIntoViewHandle(
  130.                     e.target?.parentElement?.parentElement?.parentElement
  131.                       ?.childNodes,
  132.                     index,
  133.                     tagsData?.length || 0,
  134.                   );
  135.                 }}
  136.                 onChange={(checked) => {
  137.                   handleChange(tag, checked, mode);
  138.                 }}
  139.               >
  140.                 <div className={clsx([mode === 'multiple' ? 'cur' : ''])}>
  141.                   {tag.label}
  142.                   {tag.checked || isHasSelectedTag ? <i></i> : ''}
  143.                 </div>
  144.               </CheckableTag>
  145.             </div>
  146.           );
  147.         })}
  148.       </div>
  149.     );
  150.   }, [tagsData, value]);
  151.  
  152.   return <>{dom}</>;
  153. };
  154.  
  155. export default SelectTag;

样式文件：

  1. .self-check-tag {
  2.   display: flex;
  3.  
  4.   .ant-tag {
  5.     display: inline-block;
  6.     height: 32px;
  7.     font-size: 14px;
  8.     font-family: 'Microsoft YaHei';
  9.     color: #fff;
  10.     line-height: 32px;
  11.     border-radius: 3px;
  12.     padding-left: 10px;
  13.     padding-right: 10px;
  14.   }
  15.  
  16.   div.cur {
  17.     position: relative;
  18.     // padding: 0 12px;
  19.   }
  20.  
  21.   div.cur > i {
  22.     display: block;
  23.     position: absolute;
  24.     border-bottom: 16px solid #1890ff;
  25.     border-left: 16px solid transparent;
  26.     width: 0;
  27.     height: 0;
  28.     bottom: 1px;
  29.     right: -8px;
  30.     content: '';
  31.   }
  32.  
  33.   div.cur > i::before {
  34.     content: '';
  35.     position: absolute;
  36.     top: -1px;
  37.     right: -2px;
  38.     border: 16px solid #1890ff;
  39.     border-top-color: transparent;
  40.     border-left-color: transparent;
  41.   }
  42.  
  43.   div.cur > i::after {
  44.     content: '';
  45.     width: 6px;
  46.     height: 10px;
  47.     position: absolute;
  48.     right: 0;
  49.     top: 3px;
  50.     border: 1px solid #fff;
  51.     border-top-color: transparent;
  52.     border-left-color: transparent;
  53.     transform: rotate(40deg);
  54.   }
  55.  
  56.   .ant-tag-checkable-checked {
  57.     color: #2eb3ff;
  58.     background-color: rgba(46, 179, 255, 10%);
  59.   }
  60.  
  61.   .ant-tag-checkable:hover {
  62.     color: #2eb3ff;
  63.     background-color: rgba(46, 179, 255, 10%);
  64.   }
  65. }

组件调用：

  1. const selectedTagsValues: any[] = [
  2.   { label: '特大型', value: '1' },
  3.   { label: '大型2级', value: '2' },
  4.   { label: '大型3级', value: '3' },
  5.   { label: '中型4级', value: '4' },
  6.   { label: '中型5级', value: '5' },
  7.   { label: '小型', value: '6' },
  8. ]
  9.  
  10. <SelectTag selectedTagsValues={selectedTagsValues} />

下一节将分享多层级的标签选中功能，同时支持多选和单选功能

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/79691?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号