• React动态添加标签组件

    背景

    在前端开发的过程中,一些表单的输入经常需要输入多个内容,如果采用一个输入框+逗号分隔的方式,展示起来不是很清晰,一般需要采用标签的方式

    需求

    0ff25462ff2bcc1c8dc03967aa615ea1.png

    b33aef65285c5b98976a635d81323344.png

    1. 可以指定空状态时的标题

    2. 设置标签颜色

    3. 每个标签的最大长度(字符数)

    4. 接口传递的时候的分隔标记(是用逗号,还是其他)

    5. 直接处理表单,不需要二次处理

    所以需要传入以下内容给该组件

    • title:标题

    • separator:分隔标记

    • maxLength:最大长度

    • color:颜色

    • form,name:处理的表单和对应的字段

    1. const { title = '新增一个', separator = ',', maxLength = 40, color = 'orange', form, name } = props;
    2.  
    3. TagInput.propTypes = {
    4.   title: PropTypes.string, // 新增一个tag的标题
    5.   separator: PropTypes.string, // 分隔符
    6.   maxLength: PropTypes.number, // tag最大长度
    7.   color: PropTypes.string, // tag颜色
    8.   form: PropTypes.object, // form
    9.   key: PropTypes.string, // form的key
    10. };

    代码编写

    是否显示输入框

    首先需要有一个虚线框的标签

    1. '#fff', borderStyle: 'dashed' }}>
    2.      {title}

    点击后出现文本输入框

    type="text" size="small" style={{ width: 78 }} />

    并且锚定这个输入框(出现输入光标)

    所以需要有一个状态记录是否显示输入框

    const [inputVisible, setInputVisible] = useState(false); // 是否显示输入框

    所以上述代码变为:

    1. const saveInputRef = useRef();
    2.  
    3. useEffect(() => {
    4.   if (inputVisible) saveInputRef.current.focus();
    5. }, [inputVisible]);
    6.  
    7. {inputVisible && (
    8.   type="text" size="small" style={{ width: 78 }} />
    9. )}
    10. {!inputVisible && (
    11.    setInputVisible(true)} style={{ background: '#fff', borderStyle: 'dashed' }}>
    12.      {title}
    13.   
    14. )}

    useEffect监听输入框是否出现,如果出现,则锚定「saveInputRef.current.focus()」

    添加一个标签

    为了记录输入框的内容定义一个新的变量

    1. const [inputValue, setInputValue] = useState(''); // 输入框的值
    2.  
    3. type="text" size="small" style={{ width: 78 }} value={inputValue} onChange={(e) => setInputValue(e.target.value)} />

    每次输入内容都会修改inputValue的值

    因为有多个标签,先定义一个变量来记录我们已经添加的标签

    const [tags, setTags] = useState([]); // 待分隔列表

    当鼠标在输入框外部点击或者敲击回车的时候,都需要添加一个标签

    所以需要给输入框添加onBlur和onPressEnter方法

    2.   ref={saveInputRef}
    3.   type="text"
    4.   size="small"
    5.   style={{ width: 78 }}
    6.   value={inputValue}
    7.   onChange={(e) => setInputValue(e.target.value)}
    8.   onBlur={handleInputConfirm}
    9.   onPressEnter={handleInputConfirm}
    10. />

    编写添加标签的方法:handleInputConfirm

    • 拿到之前的标签+本次输入的,一起放到tags变量中

    • 给表单设置一下这个值(用分隔标记拼接起来)

    • 隐藏输入框

    • 清空输入框

    1. /*
    2.  * 新增一个tag
    3.  * */
    4. const handleInputConfirm = () => {
    5.   if (inputValue && tags.indexOf(inputValue) === -1) {
    6.     const newTags = [...tags, inputValue];
    7.     setTags(newTags);
    8.     form.setFieldsValue({ [name]: newTags?.join(separator) });
    9.   } else {
    10.     message.error('请正确输入');
    11.   }
    12.   setInputVisible(false);
    13.   setInputValue('');
    14. };

    展示标签

    在上述步骤之后,tags中已经添加了我们的标签了,将它展示出来

    • 判断字符串长度,如果大于我们配置的最大长度则裁剪,没有则全部展示

    • 超长的标签增加一个气泡提示,鼠标移动上去后可以看到全部内容

    1. {tags.map((tag) => {
    2.   const isLongTag = tag.length > maxLength;
    3.   const tagElem = (
    4.     
    5.       {isLongTag ? `${tag.slice(0, maxLength)}...` : tag}
    6.     
    7.   );
    8.   return isLongTag ? (
    9.     
    10.       {tagElem}
    11.     
    12.   ) : (
    13.     tagElem
    14.   );
    15. })}

    删除标签

    给Tag设置closable和onClose方法

    1. const tagElem = (
    2.    handleClose(tag)} color={color}>
    3.     {isLongTag ? `${tag.slice(0, 20)}...` : tag}
    4.   
    5. );

    handleClose方法:

    • 过滤tags中不需要的tag并更新

    • 重新给表单对应的键值对赋值

    1. /*
    2.  * 删除某个tag
    3.  * */
    4. const handleClose = (removedTag) => {
    5.   const updatedTags = tags.filter((tag) => tag !== removedTag);
    6.   setTags(updatedTags);
    7.   form.setFieldsValue({ [name]: updatedTags?.join(separator) });
    8. };

    编辑状态

    当我们处于编辑状态的时候,打开表单后,它原本就有内容了

    监听一下表单的内容,如果存在,则使用分隔标记分隔后塞入tags中

    1. useEffect(() => {
    2.     if (form.getFieldValue(name)) setTags(form.getFieldValue(name).split(separator));
    3.   }, [form.getFieldValue(name)]);

    Antd4.x完整代码

    折叠源码

    1. import React, { memo, useEffect, useRef, useState } from 'react';
    2. import { Input, message, Tag, Tooltip } from 'antd';
    3. import PropTypes from 'prop-types';
    4. import { PlusOutlined } from '@ant-design/icons';
    5.  
    6. /*
    7.  * tag形式分隔
    8.  * */
    9. const TagInput = memo((props) => {
    10.   const [tags, setTags] = useState([]); // 待分隔列表
    11.   const [inputVisible, setInputVisible] = useState(false); // 是否显示输入框
    12.   const [inputValue, setInputValue] = useState(''); // 输入框的值
    13.   const { title = '新增一个', separator = ',', maxLength = 40, color = 'orange', form, name } = props;
    14.   const saveInputRef = useRef();
    15.  
    16.   useEffect(() => {
    17.     if (inputVisible) saveInputRef.current.focus();
    18.   }, [inputVisible]);
    19.  
    20.   useEffect(() => {
    21.     if (form.getFieldValue(name)) setTags(form.getFieldValue(name).split(separator));
    22.   }, [form.getFieldValue(name)]);
    23.  
    24.   /*
    25.    * 删除某个tag
    26.    * */
    27.   const handleClose = (removedTag) => {
    28.     const updatedTags = tags.filter((tag) => tag !== removedTag);
    29.     setTags(updatedTags);
    30.     form.setFieldsValue({ [name]: updatedTags?.join(separator) });
    31.   };
    32.  
    33.   /*
    34.    * 新增一个tag
    35.    * */
    36.   const handleInputConfirm = () => {
    37.     if (inputValue && tags.indexOf(inputValue) === -1) {
    38.       const newTags = [...tags, inputValue];
    39.       setTags(newTags);
    40.       form.setFieldsValue({ [name]: newTags?.join(separator) });
    41.     } else {
    42.       message.error('请正确输入');
    43.     }
    44.     setInputVisible(false);
    45.     setInputValue('');
    46.   };
    47.  
    48.   return (
    49.     <>
    50.       {tags.map((tag) => {
    51.         const isLongTag = tag.length > maxLength;
    52.         const tagElem = (
    53.            handleClose(tag)} color={color}>
    54.             {isLongTag ? `${tag.slice(0, 20)}...` : tag}
    55.           
    56.         );
    57.         return isLongTag ? (
    58.           
    59.             {tagElem}
    60.           
    61.         ) : (
    62.           tagElem
    63.         );
    64.       })}
    65.       {inputVisible && (
    66.         
    67.           ref={saveInputRef}
    68.           type="text"
    69.           size="small"
    70.           style={{ width: 78 }}
    71.           value={inputValue}
    72.           onChange={(e) => setInputValue(e.target.value)}
    73.           onBlur={handleInputConfirm}
    74.           onPressEnter={handleInputConfirm}
    75.         />
    76.       )}
    77.       {!inputVisible && (
    78.          setInputVisible(true)} style={{ background: '#fff', borderStyle: 'dashed' }}>
    79.            {title}
    80.         
    81.       )}
    82.     
    83.   );
    84. });
    85.  
    86. TagInput.propTypes = {
    87.   title: PropTypes.string, // 新增一个tag的标题
    88.   separator: PropTypes.string, // 分隔符
    89.   maxLength: PropTypes.number, // tag最大长度
    90.   color: PropTypes.string, // tag颜色
    91.   form: PropTypes.object, // form
    92.   key: PropTypes.string, // form的key
    93. };
    94.  
    95. export default TagInput;

    Antd3.x完整代码

    antd3.x中部分组件的用法不一样,需要修改一下

    折叠源码

    1. import React, { useEffect, useRef, useState } from 'react';
    2. import { Icon, Input, message, Tag, Tooltip } from 'antd';
    3. import PropTypes from 'prop-types';
    4.  
    5. /*
    6.  * tag形式分隔
    7.  * */
    8. const TagInput = React.forwardRef((props, ref) => {
    9.   const [tags, setTags] = useState([]); // 待分隔列表
    10.   const [inputVisible, setInputVisible] = useState(false); // 是否显示输入框
    11.   const [inputValue, setInputValue] = useState(''); // 输入框的值
    12.   const {
    13.     title = '新增一个',
    14.     separator = ',',
    15.     maxLength = 40,
    16.     color = 'orange',
    17.     form,
    18.     name,
    19.   } = props;
    20.   const saveInputRef = useRef();
    21.  
    22.   useEffect(() => {
    23.     if (inputVisible) saveInputRef.current.focus();
    24.   }, [inputVisible]);
    25.  
    26.   useEffect(() => {
    27.     if (form.getFieldValue(name)) {
    28.       setTags(form.getFieldValue(name).split(separator));
    29.     }
    30.   }, [form.getFieldValue(name)]);
    31.  
    32.   /*
    33.    * 删除某个tag
    34.    * */
    35.   const handleClose = (removedTag) => {
    36.     const updatedTags = tags.filter((tag) => tag !== removedTag);
    37.     setTags(updatedTags);
    38.     form.setFieldsValue({ [name]: updatedTags?.join(separator) });
    39.   };
    40.  
    41.   /*
    42.    * 新增一个tag
    43.    * */
    44.   const handleInputConfirm = () => {
    45.     if (inputValue && tags.indexOf(inputValue) === -1) {
    46.       const newTags = [...tags, inputValue];
    47.       setTags(newTags);
    48.       form.setFieldsValue({ [name]: newTags?.join(separator) });
    49.     } else {
    50.       message.error('请正确输入');
    51.     }
    52.     setInputVisible(false);
    53.     setInputValue('');
    54.   };
    55.  
    56.   return (
    57.     <>
    58.       {tags.map((tag) => {
    59.         const isLongTag = tag.length > maxLength;
    60.         const tagElem = (
    61.           
    62.             key={tag}
    63.             closable
    64.             onClose={() => handleClose(tag)}
    65.             color={color}
    66.           >
    67.             {isLongTag ? `${tag.slice(0, 20)}...` : tag}
    68.           
    69.         );
    70.         return isLongTag ? (
    71.           
    72.             {tagElem}
    73.           
    74.         ) : (
    75.           tagElem
    76.         );
    77.       })}
    78.       {inputVisible && (
    79.         
    80.           ref={saveInputRef}
    81.           type="text"
    82.           size="small"
    83.           style={{ width: 78 }}
    84.           value={inputValue}
    85.           onChange={(e) => setInputValue(e.target.value)}
    86.           onBlur={handleInputConfirm}
    87.           onPressEnter={handleInputConfirm}
    88.         />
    89.       )}
    90.       {!inputVisible && (
    91.         
    92.           onClick={() => setInputVisible(true)}
    93.           style={{ background: '#fff', borderStyle: 'dashed' }}
    94.         >
    95.           type="plus-circle" /> {title}
    96.         
    97.       )}
    98.     
    99.   );
    100. });
    101.  
    102. TagInput.propTypes = {
    103.   title: PropTypes.string, // 新增一个tag的标题
    104.   separator: PropTypes.string, // 分隔符
    105.   maxLength: PropTypes.number, // tag最大长度
    106.   color: PropTypes.string, // tag颜色
    107.   form: PropTypes.object, // form
    108.   key: PropTypes.string, // form的key
    109. };
    110.  
    111. export default TagInput;
  • 相关阅读:
    【Javascript系统学习】(二)
    【2023联发科提前批笔试题】~ 题目及参考答案
    洛谷P3807 lucas定理模板
    参数优化文档介绍
    基于python的新生入学管理系统设计与实现-计算机毕业设计源码+LW文档
    [附源码]java毕业设计社区新冠疫情防控网站
    深度学习三巨头邀你来参会！赢取RTX 3090！NVIDIA GTC 2022 AI 大会来了！
    百度SEO优化技巧与布局（提升网站排名的5种有效方法）
    数学物理方程：球函数
    29.Xaml TreeView控件----＞树形控件，节点的形式显示数据
  • 原文地址：https://blog.csdn.net/weixin_37786060/article/details/132613802