Partage
  • Partager sur Facebook
  • Partager sur Twitter

ReactJS- Génération de champs dynamiques

    18 septembre 2021 à 11:44:05

    Après 2 jours de luttes acharnées, j'ai décidé de poster ici

    Mon souci est le suivant :

    Dans le cadre d'un projet, je souhaite générer un nombre de champs de saisie égal à la taille d'un tableau. Exemple :

    https://codesandbox.io/s/adoring-rgb-n0bdk?file=/src/App.js

    On peut déjà connaître le problème, lors de l'insertion d'une valeur sur un champ, cette même valeur sera insérée sur tous les autres champs qui partagent le même UseState comme valeur.

    J'ai essayé beaucoup de choses pour résoudre mon problème comme ceci:

    https://codesandbox.io/s/blissful-rain-mcol2?file=/src/App.js (J'essaye d'adapter le code pour résoudre mon soucis).

    Je ne mets rien de plus pour éviter que le sujet ne devienne trop long. Alors, auriez-vous une solution pour résoudre le problème ? Pour ma part je suis à court d'idées, et encore débutant sur React. Merci d'avance! ^^

    -
    Edité par Jinouga 18 septembre 2021 à 11:49:13

    • Partager sur Facebook
    • Partager sur Twitter
      18 septembre 2021 à 15:41:54

      Salut,

      Je pense, mais il doit avoir plein d'autres solutions, que le plus simple est d'utiliser des inputs non contrôlés par React, tu récupéreras leur valeurs via une boucle au submit qui sera envoyé au state.

      Voici ici un exemple basique:

      https://codesandbox.io/s/reverent-allen-67psv?file=/src/App.js

      • Partager sur Facebook
      • Partager sur Twitter

      La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]

        18 septembre 2021 à 16:16:02

        NadfriJS a écrit:

        Salut,

        Je pense, mais il doit avoir plein d'autres solutions, que le plus simple est d'utiliser des inputs non contrôlés par React, tu récupéreras leur valeurs via une boucle au submit qui sera envoyé au state.

        Voici ici un exemple basique:

        https://codesandbox.io/s/reverent-allen-67psv?file=/src/App.js


        Yo merci pour ta réponse!

        Le CodeSandBox que tu as envoyé ne contient pas de code

        • Partager sur Facebook
        • Partager sur Twitter
          20 septembre 2021 à 19:23:22

          Yes ça marche merci bien! :D

          ça correspond en + à ce que je souhaitais faire, reste plus qu'à comprendre le code pour l'adapter totalement à mon besoin.

          Encore merci!!

          • Partager sur Facebook
          • Partager sur Twitter
            20 septembre 2021 à 22:13:26

            Salut, si tu ne comprends pas n'hésites pas à ma demander.

            Sinon aujourd'hui je viens de découvrir REACT-HOOKS-FORM, c'est une petite librairie React qui permet de gérer super facilement les formulaires sans avoir à s'occuper des states ect...

            https://react-hook-form.com/

            Je te conseille vivement d'y jeter un œil, ca pourrait régler ton problème facilement. Enfait toutes les données des inputs sont récupérer directement au submit et envoyer dans une props. Apres avec cette props tu fais ce que tu veux, elle contient toutes les données des champs, neanmoins chaque champs doit avoir un nom unique, c'est à toi de faire en sorte lors de la création d'un input supplémentaire de générer un nom unique.

            -
            Edité par NadfriJS 20 septembre 2021 à 22:13:42

            • Partager sur Facebook
            • Partager sur Twitter

            La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]

            ReactJS- Génération de champs dynamiques

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            • Editeur
            • Markdown