如何在React中实现带可点击下拉插入标签功能的textarea组件

核心逻辑是通过ref获取Tagify的原生实例，调用内置方法完成标签插入，不需要手动操作文本框DOM。 #

实现步骤 #

• 步骤1：绑定Tagify实例到ref，开启混合输入模式

import { useRef } from 'react';
import Tagify from '@yaireo/tagify-react';
import '@yaireo/tagify/dist/tagify.css';

function MixInputComponent() {
  const tagifyRef = useRef(null);

  // 下拉点击触发的插入方法
  const handleSelectTag = (tagVal) => {
    if (!tagifyRef.current) return;
    // 第二个参数传true：将标签插入到文本框当前光标位置
    tagifyRef.current.addTags([{ value: tagVal }], true);
  };

  return (
    <div className="tag-input-wrapper">
      <Tagify
        ref={tagifyRef}
        // *必须开启mix模式，才能支持普通文本与标签共存*
        mode="mix"
        settings={{
          // 关闭Tagify自带的自动下拉弹出，使用自定义下拉
          dropdown: {
            enabled: 0
          }
        }}
      />
      {/* 自定义下拉菜单 */}
      <div className="custom-tag-dropdown">
        {['用户标签', '部门标签', '项目标签'].map(item => (
          <button 
            key={item}
            onClick={() => handleSelectTag(item)}
          >
            {item}
          </button>
        ))}
      </div>
    </div>
  )
}
export default MixInputComponent;

• 步骤2：如果不需要自定义下拉，直接使用Tagify自带的下拉菜单，只需要监听dropdown:select事件即可，不需要额外绑定点击逻辑，Tagify会自动完成标签插入：

<Tagify
  mode="mix"
  settings={{
    dropdown: {
      enabled: 1, // 输入触发字符后自动弹出下拉
      maxItems: 5
    },
    // 预设可选标签列表
    whitelist: ['用户标签', '部门标签', '项目标签']
  }}
  // 监听下拉选中事件，可在这里做额外逻辑处理
  onDropdownSelect={(e) => {
    const selectedTag = e.detail.data;
    console.log('选中的标签：', selectedTag);
  }}
/>

注意事项 #

• 混合模式下如果需要自定义标签的触发字符（比如输入@弹出标签列表），可以在settings里添加pattern: /@/配置
• 自定义标签样式可以通过修改Tagify的CSS变量，或者在settings的templates配置项里自定义标签的渲染结构
• addTags方法支持传入数组批量插入多个标签，单个标签直接传长度为1的数组即可

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