Semi Design 标签输入框组件深度解析-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00913/article/details/148419123

Semi Design 标签输入框组件深度解析

semi-design 🚀A modern, comprehensive, flexible design system and React UI library. 🎨 Provide more than 2800+ Design Tokens, easy to build your design system. Make Semi Design to Any Design. 🧑🏻‍💻 Design to Code in one click 项目地址: https://gitcode.com/gh_mirrors/se/semi-design

标签输入框（TagInput）是现代Web应用中常见的交互组件，它允许用户通过输入内容生成标签，常用于标签管理、关键词输入等场景。本文将全面解析Semi Design中的TagInput组件，从基础使用到高级特性，帮助开发者更好地理解和应用这一组件。

组件概述

TagInput是Semi Design提供的一个功能丰富的标签输入组件，具有以下核心特性：

支持通过回车键或分隔符批量添加标签
提供多种尺寸和校验状态样式
支持标签数量限制和长度限制
可实现完全受控或非受控模式
支持自定义标签渲染和拖拽排序
提供丰富的回调函数

基础使用

基本引入与使用

import { TagInput } from '@douyinfe/semi-ui';

function BasicDemo() {
  return (
    <TagInput
      defaultValue={['默认标签1', '默认标签2']}
      placeholder="请输入标签..."
      onChange={(tags) => console.log('当前标签:', tags)}
    />
  );
}

在这个基础示例中，我们：

导入了TagInput组件
设置了默认值defaultValue
提供了占位文本placeholder
添加了onChange回调监听标签变化

批量输入功能

TagInput支持通过分隔符批量输入标签：

<TagInput 
  separator={['-', '/', '|']}
  placeholder="使用-、/或|分隔多个标签"
/>

这个特性特别适合需要快速输入多个标签的场景，用户只需一次性输入并用分隔符隔开各个标签即可。

核心功能详解

标签管理

标签数量限制：通过max属性控制最大标签数量
标签长度限制：通过maxLength限制单个标签长度
重复标签控制：allowDuplicates控制是否允许重复标签
批量删除：showClear属性启用一键清除功能

<TagInput
  max={5}
  maxLength={10}
  allowDuplicates={false}
  showClear
/>

展示优化

数量截断展示：maxTagCount控制显示数量，超出部分以+N形式展示
悬浮展示：showRestTagsPopover控制是否显示剩余标签
截断提示：showContentTooltip控制长标签的提示显示

<TagInput
  maxTagCount={3}
  showRestTagsPopover
  showContentTooltip={{ type: 'popover' }}
/>

交互增强

拖拽排序：draggable属性启用拖拽功能
失焦自动创建：addOnBlur在失焦时自动创建标签
焦点管理：通过ref调用focus()和blur()方法

const tagInputRef = useRef();

<TagInput
  ref={tagInputRef}
  draggable
  addOnBlur
/>

<Button onClick={() => tagInputRef.current.focus()}>
  聚焦输入框
</Button>

高级定制

自定义标签渲染

通过renderTagItem属性可以完全自定义标签的渲染方式：

function renderCustomTag(value, index, onClose) {
  return (
    <div style={{ background: '#f0f0f0', padding: '4px 8px' }}>
      {value}
      <span onClick={onClose} style={{ marginLeft: 8 }}>×</span>
    </div>
  );
}

<TagInput renderTagItem={renderCustomTag} />

受控模式

TagInput支持完全受控模式，可以精细控制输入状态：

function ControlledDemo() {
  const [tags, setTags] = useState(['初始标签']);
  const [inputValue, setInputValue] = useState('');

  return (
    <TagInput
      value={tags}
      inputValue={inputValue}
      onChange={setTags}
      onInputChange={setInputValue}
    />
  );
}

设计规范

Semi Design为TagInput提供了完善的设计变量，确保组件在不同场景下保持一致的视觉效果：

尺寸规范：提供small/default/large三种尺寸
状态样式：包含default/warning/error三种校验状态
间距系统：内置合理的标签间距和边距

无障碍支持

TagInput组件内置了完善的ARIA支持：

通过aria-label提供组件用途说明
根据disabled状态自动设置aria-disabled
根据validateStatus自动设置aria-invalid
所有交互元素都有明确的aria-label

最佳实践

表单集成：在表单中使用时，建议配合Form组件使用
性能优化：当标签数量较大时，考虑使用虚拟滚动
错误处理：合理使用校验状态和错误提示
移动端适配：在小屏幕上考虑使用全屏输入模式

<Form>
  <Form.TagInput
    field="tags"
    label="标签"
    rules={[{ required: true, message: '请至少输入一个标签' }]}
  />
</Form>

总结

Semi Design的TagInput组件提供了从基础到高级的完整标签输入解决方案。通过本文的介绍，开发者可以：

快速上手基础标签输入功能
理解并应用各种高级特性
根据需求进行深度定制
遵循最佳实践构建更好的用户体验

无论是简单的标签输入需求，还是复杂的标签管理系统，Semi Design的TagInput都能提供强大的支持。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考