React-tags: useState

Bonjour, oui le composant fonctionne aussi bien avec useState() qu'avec les composants basés sur des classes.

avez-vous un exemple que vous pouvez gentiment partager à l'aide de crochets ? Je souhaite utiliser des composants contrôlés.

avez-vous un exemple que vous pouvez gentiment partager à l'aide de crochets ? Je souhaite utiliser des composants contrôlés.

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}
    />
  </>);
}

Merci d'avoir pris le temps de partager cet exemple @kulahin