React实现标签选择后在输入框内嵌入徽章功能求教

核心思路：拆分输入区域为标签列表+受控输入框 #

不用直接操作innerHTML，把输入区域拆成两个部分组合渲染：已选中的标签集合，和一个始终处于可输入状态的受控文本框。

• 状态管理：
  • 用数组selectedTags存储已选中的标签（比如[{id: 1, name: 'react'}, ...]）
  • 用状态inputValue管理输入框的当前文本
• 渲染结构：
  • 外层用容器（如div）模拟输入框视觉效果，设置边框、padding等样式
  • 容器内部先遍历selectedTags，渲染带删除按钮的标签徽章
  • 最后渲染无样式的受控输入框，设边框为0、背景透明，获取焦点时隐藏默认样式
• 交互逻辑：
  • 输入框回车/选中候选标签时，将inputValue加入selectedTags并清空输入值
  • 点击标签删除按钮，从selectedTags中移除对应项
  • 退格键处理：当inputValue为空时，按退格删除最后一个标签
• 样式适配：
  • 给标签徽章设置圆角、背景色、内边距，对齐StackOverflow标签样式
  • 外层容器设display: flex、flex-wrap: wrap，让标签和输入框自动换行
  • 输入框设flex: 1，无标签时占满容器，有标签时自适应剩余宽度

关键细节 #

• 输入框设置autoFocus，或在容器点击时自动聚焦，保证和原生输入框体验一致
• 可添加标签候选下拉框，监听onChange过滤候选标签，选中后更新标签列表和输入值
• 添加前检查selectedTags，避免重复标签

内容的提问来源于stack exchange，提问作者TY Mathers