![]() I am familiar with difference between a library that was built in react vs. The React demo (code starts after line 55) shows the "state" being fed-back as a new value You can always change the value of your tagify component and re-sync it to whatever state you wish. In my opinion you don't need to be so strict about this and just give up and let Tagify do what it does and you just make sure you keep your state in sync and not the other-way around. This won't be as performant as letting tagify handle the DOM because it knows best only to update what's needed and not everything entirely every time there's a change, but if this is what you absolutely need. I will make it work, just need to think what would be the best way to tell the component it shouldn't add/remove/edit tags by itself, but only fire a "change" event with the new-to-be value and then it is up to you as the developer to update your state and re-feed the component with the new value. That other lib you linked to, which you've mentioned you're a fan of doesn't have close to half the features Tagify has. Tagify was built in javascript and not in React and in vanilla-world, there are no controlled-components, so the wrapper doesn't magically transforms Tagify to be controlled, it a complex thing I must work on internally. Giving it directly as an array would lend itself very well to being a controlled component.Īs for approach, I'm a fan of how this library implements controlled behavior: ![]() On a side note: It would also be a very nice convenience if the callback would provide the tag list as an array as opposed to having the user use to get a string of the array which then needs to be converted into an array using something like JSON.stringify. It makes it really hard to do this if library is not well suited towards "controlled" behavior. Updating the tags needs to be done bidirectionally (sometimes through input itself, some times changed by redux). In general, the reason controlled behavior is so important is we have a very complex react + redux application and the tag input needs to be properly synced with single source of truth. I also get a react warning saying "can not flush updates while react is already rendering" every time a tag changes. You also get a firing of the onchange event when initializing if you provide a 'value' prop. Having the onChanged event set the react state which feeds back into 'value' prop causes a double firing of events (namely when you press backspace to delete a tag). My bad!! I didn't mean to come off as rude. It would also involve adding an option to instance factory that tells the library not to automatically add/remove/change the tag in its own internal tag state, but still provide information on what were to happen in handler functions so that we are given the necessary information to know how to alter the react state (which in turn will cause the controlled tagify component to be updated based on the array from state we feed into it). To make this possible, you would need to add a function that lets you manually set the contents of the tag input array (pass an array and it will change the contents of the tag input to reflect this new array). Right now it behaves as an uncontrolled component whereas a controlled component would be ideal! Right now the source of truth is self contained within the tagify instance itself. ![]() Instead of relying on callbacks to gather information about what happened as far as tag additions/changes/deletion, the tag input should be driven off of React state (ie: an array of tags as a single source of truth).
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |