如何在React中使用Tagify的.on方法，解决tagify.on不是函数的报错

报错原因 #

• 初始化顺序错误：你在声明tagsInput = createRef()之前就将它传入new Tagify初始化，且React的ref需要等到组件挂载完成后，tagsInput.current才会指向真实DOM节点，此时初始化Tagify会因为找不到有效输入节点失败，返回的实例不包含正常方法。
• 配置语法错误：配置项中here) tagTextProp: 'text'多了一个多余的右括号，会导致初始化过程直接报错，无法生成正常实例。

React中正确使用方式 #

以函数组件为例，正确的初始化、事件绑定逻辑如下，需要将Tagify实例存在ref中避免组件重渲染丢失实例，所有初始化逻辑放在useEffect中保证DOM已挂载：

import { useRef, useEffect, useCallback } from 'react'
import Tagify from '@yaireo/tagify'
import '@yaireo/tagify/dist/tagify.css'

function YourComponent() {
  // 存储输入框DOM引用
  const tagsInputRef = useRef(null)
  // 存储Tagify实例
  const tagifyRef = useRef(null)
  // 示例whitelist数据
  const fields = ['@用户1', '#标签1', '@用户2']

  // 输入事件回调，需要依赖组件内状态时用useCallback包裹
  const handleInput = useCallback((e) => {
    const prefix = e.detail.prefix;
    if (prefix && e.detail.value.length > 1) {
      tagifyRef.current.dropdown.show(e.detail.value);
    }
    console.log(tagifyRef.current.value)
    console.log('mix-mode "input" event value: ', e.detail)
  }, [])

  // 标签添加回调
  const handleAdd = useCallback((e) => {
    console.log(e)
  }, [])

  useEffect(() => {
    // 组件挂载后再初始化Tagify
    if (!tagsInputRef.current) return

    tagifyRef.current = new Tagify(tagsInputRef.current, {
      mode: 'mix',
      pattern: /@|#/,
      tagTextProp: 'text',
      whitelist: fields.map(item => {
        return typeof item == 'string' ? { value: item } : item
      }),
      dropdown: {
        enabled: 1,
        position: 'text',
        mapValueTo: 'text',
        highlightFirst: true
      },
      // 简单回调可以直接写在callbacks里，不需要额外用.on绑定
      callbacks: {
        remove: console.log
      }
    })

    // 绑定事件
    tagifyRef.current.on('input', handleInput)
    tagifyRef.current.on('add', handleAdd)

    // 组件卸载时销毁实例，避免内存泄漏
    return () => {
      tagifyRef.current.off('input', handleInput)
      tagifyRef.current.off('add', handleAdd)
      tagifyRef.current.destroy()
    }
  }, [fields, handleInput, handleAdd])

  return <input ref={tagsInputRef} />
}

常见问题解答 #

• 要不要把事件回调定义为常量和箭头函数？
  如果回调需要读取组件内的state、props，建议使用useCallback包裹箭头函数，保证依赖更新时回调能拿到最新值；如果只是简单的静态逻辑，普通函数也可以正常使用。
• 所有事件都要用.on绑定吗？
  Tagify的配置项本身支持callbacks参数，简单的回调可以直接写在callbacks中，和.on绑定效果完全一致，按需选择即可。

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