¿Hay alguna forma de usar ganchos y estado con esta biblioteca? No vi ningún ejemplo en la documentación.
Hola, sí, el componente funciona tan bien con useState()
como con componentes basados en clases.
¿Tiene un ejemplo que pueda compartir amablemente usando ganchos? Me gustaría utilizar componentes controlados.
¿Tiene un ejemplo que pueda compartir amablemente usando ganchos? Me gustaría utilizar componentes controlados.
import React, { useState, useRef } from 'react'
export default function MyForm() {
const tagsInput = useRef(null);
const [tags, setTags] = useState([]);
const [suggestions, setSuggestions] = useState([]);
const [tagAutocompleteBusy, setTagAutocompleteBusy] = useState(false);
async function onTagInput(query) {
if (!tagAutocompleteBusy) {
setTagAutocompleteBusy(true);
const result = await fetch(`/tags/autocomplete?term=${query}`);
setSuggestions(result.data);
setTagAutocompleteBusy(false);
return result;
}
}
const onTagDelete = (i) => {
setTags(() => {
tags.splice(i, 1);
return tags;
});
}
const onTagAddition = (tag) => {
setTags(() => {
return [...tags, tag];
});
}
return (<>
<ReactTags
ref={tagsInput}
tags={tags}
suggestions={suggestions}
onDelete={onTagDelete}
onAddition={onTagAddition}
onInput={onTagInput}
/>
</>);
}
Gracias por tomarse el tiempo para compartir este ejemplo @kulahin
Comentario más útil