I have a component that using the tagify library. I am getting an error that tagify.on is not a function.
How do I do the .on in React? How do I add these .on methods to the this tagify component that I'm creating?
Do I make them all constants and arrow functions?
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)
});
Had something similar to yours. Suggestion:
let tagsInput = createRef(); line, move it out). Call it configureTagify or whatever..
useEffect(() => {
...
configureTagify();
...
}, []);
Looking after the docs,
.on method is provided for jQuery, you don't need it. You can use it on callbacks:
callbacks: {
"input": (e) => console.log(e.detail))