IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

React Discussion :

Génération de plusieurs champs dynamiques


Sujet :

React

  1. #1
    Nouveau Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    décembre 2019
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 21
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : décembre 2019
    Messages : 2
    Points : 1
    Points
    1
    Par défaut Génération de plusieurs champs dynamiques
    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 :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    function App() {
      const [UseState, setUseState] = useState("");
      const array = [0, 1, 2];
     
      const HandleAdding = (e) => {
        e.preventDefault;
        const returnJson = { UseState };
        //rest of the code
      };
     
      return (
        <div>
          {array.map(() => (
            <form onSubmit={HandleAdding}>
              <input value={UseState} onChange={(e) => setUseState(e.target.value)} />
            </form>
          ))}
        </div>
      );
    }

    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.
    Voici un CodeSandBox pour concrétiser davantage mon soucis:

    https://codesandbox.io/s/adoring-rgb...le=/src/App.js

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

    https://codesandbox.io/s/blissful-ra...le=/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! ^^

  2. #2
    Membre éprouvé
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    octobre 2007
    Messages
    901
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : octobre 2007
    Messages : 901
    Points : 1 291
    Points
    1 291
    Par défaut
    Salut,

    Je suis pas sur à 100% d'avoir compris ce que tu essayais de faire, mais je pense que la clé pour aller où tu veux, c'est de découper en plusieurs composants.
    Quoi qu'il en soit, tu pars en boucle infinie parce que quand ton composant se dessine, il fait appel à une fonction qui change son state, ce qui re-déclenche un render

    Si je comprends bien tu veux afficher n fois un groupe de champs.
    Pour l'instant, ce n est la taille d'un tableau.
    À mon avis, tu devrais commencer par découper en au moins 2 composants. 1 qui se charge d'afficher n fois l'autre qui affiche les champs.

    Un exemple simple :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
     
     
    function Item(props) {
      const item = typeof props.value === 'object' ? props.value : {};
      return (
       <tr>
        <td>{props.index}</td>
        <td><input type="text" value={item.name || ''} onChange={e => props.onChange({...props.value, name: e.target.value })}/></td>
        <td><input type="text" value={item.min || ''} onChange={e => props.onChange({...props.value, min: e.target.value })}/></td>
        <td><input type="text" value={item.max || ''} onChange={e => props.onChange({...props.value, max: e.target.value })}/></td>
        <td><input type="text" value={item.weight || ''} onChange={e => props.onChange({...props.value, weight: e.target.value })}/></td>
       </tr>
      )
    }
     
    export default function App() {
      const [data, setData] = useState([0, 1, 2]);
     
      function setDataAtIndex(index, value) {    
        setData([...data.slice(0, index), value, ...data.slice(index + 1, data.length)]);
      }
      return (
        <div>
        <table>
        { data.map((item, index) => (
          <Item index={index} value={item} onChange={e => setDataAtIndex(index, e)}/>
        ))}
        </table>
    <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
      );
    }
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

  3. #3
    Nouveau Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    décembre 2019
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 21
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : décembre 2019
    Messages : 2
    Points : 1
    Points
    1
    Par défaut
    Yoo!

    Merci beaucoup pour ta réponse, je vais essayer d'implémenter ce que tu m'as dis, pour l'instant j'suis pas sûr si ça répond bien à ma problématique.
    J'ai simplifié mon sujet afin que ça soit plus court à lire et plus facile à comprendre! ^^

Discussions similaires

  1. Réponses: 10
    Dernier message: 29/01/2019, 16h27
  2. Réponses: 21
    Dernier message: 28/01/2013, 11h13
  3. Réponses: 1
    Dernier message: 18/12/2006, 00h26
  4. [CR] Groupement dynamique sur plusieurs champs paramètrés
    Par CDRIK dans le forum SAP Crystal Reports
    Réponses: 8
    Dernier message: 07/06/2004, 17h55
  5. [CR9] Plusieurs champs dans details
    Par maxxou dans le forum SAP Crystal Reports
    Réponses: 4
    Dernier message: 28/01/2004, 13h35

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo