如何在react中使用.on？

Question

我有一个使用标记库的组件。我得到一个错误，tagify.on不是一个函数。

如何在React中执行.on？如何将这些.on方法添加到我正在创建的这个标记化组件？

我要让它们都是常量和箭头函数吗？

const tagify = new Tagify(tagsInput, {
    //  mixTagsInterpolator: ["{{", "}}"],
    mode: 'mix',
    pattern: /@|#/,
    here) tagTextProp: 'text',

    whitelist: fields.map(function(item) {
        return typeof item == 'string' ? {
            value: item
        } : item
    }),
    dropdown: {
        enabled: 1,
        position: 'text',
        mapValueTo: 'text',
        highlightFirst: true
    },
    callbacks: {
        add: console.log, // callback when adding a tag
        remove: console.log // callback when removing a tag
    }
});

let tagsInput = createRef();

tagify.on('input', function(e) {
    < -- - this is giving error tagify.on is not a
    function
    const prefix = e.detail.prefix;

    if (prefix) {

        if (e.detail.value.length > 1)
            tagify.dropdown.show(e.detail.value);
    }

    console.log(tagify.value)
    console.log('mix-mode "input" event value: ', e.detail)
});

tagify.on('add', function(e) {
    < -- - this is giving error tagify.on is not a
    function
    console.log(e)
});

Answer 1

和你有相似的东西。建议：

• 在函数中编写所有上层代码(除了let tagsInput = createRef();行之外，将其移出)。
• 在适当的地方将其命名为

(在开头用于e.x，componentDidMount的等价物)

。

useEffect(() => {  
  ...  
  configureTagify();  
  ...  
}, []);

Answer 2

看着文件，

jQuery提供了.on方法，您不需要使用它。您可以在回调中使用它：

callbacks: {
  "input": (e) => console.log(e.detail))