Je crée une application de réaction dont le formulaire comprend les détails de base et la section des détails de l'emploi.

Le formulaire est presque terminé et je suis également capable de former une structure JSON pour différentes sections.

Exemple de travail complet ici : https: // codesandbox.io/s/nextjs-css-only-carousel-forked-v7gg0

Maintenant, pour la section des détails sur l'emploi, je suis dans le besoin d'inclure la date de début et la date de fin comme champ de saisie.

J'ai donc créé un sélecteur de mois et d'année personnalisé et inclus le même dans les composants que monthpicker.js .

Et à partir de la section des détails de l'emploi, j'ai appelé le composant en utilisant le code,

        <MonthPicker
          value={month}
          name="startDate"
          label="Start Date"
          onChange={setMonth}
        />

À l'aide du code suivant, la valeur sélectionnée est mise à jour,

  const [month, setMonth] = useState(
    `${`0${new Date().getMonth() + 1}`.slice(-2)}/${new Date().getFullYear()}`
  );

Mais je peux comprendre que c'est le lieu où les choses doivent être changées mais je ne suis pas sûr de le gérer.

Fichier contenant le composant monthpicker < / a>.

Condition: Donc, si l'utilisateur sélectionne le mois et l'année dans le sélecteur, cette valeur particulière doit être mise à jour dans la structure JSON, ce qui ne se produit pas actuellement.

Par exemple:

Si l'utilisateur sélectionne le mois en juin et l'année en 2016, le format JSON sera comme,

{
  "basicDetails": {
    "firstName": "...",
    "lastName": "..."
  },
  "companyDetails": [
    {
      "companyName": "...",
      "designation": "...",
      "startDate": "06/2016"
    }
  ]
}

Comme il est possible d'ajouter des lignes supplémentaires, la valeur sélectionnée doit être ajoutée aux entrées respectives.

Vraiment coincé depuis longtemps et j'ai besoin d'une bonne aide.

-1
Undefined 27 août 2020 à 13:34

2 réponses

Meilleure réponse

@Undefined J'utiliserai le même code de ma réponse ici et ajouterai la fonctionnalité que vous essayez de mettre en œuvre sur ce post.


La raison pour laquelle les changements de la valeur de votre composant MonthPicker ne reflètent pas le formValue est que vous passez le setMonth comme onChange au lieu de handleInputChange - en gros les modifications sont stockées uniquement dans l'état month.

Idéalement, nous devrions pouvoir utiliser le MonthPicker comme ci-dessous, où nous acceptons un event de l'accessoire onChange que nous pouvons utiliser pour extraire les target.name et {{X4} } Propriétés.

<MonthPicker
  label="Start Date"
  name="startDate"
  onChange={(event) => handleInputChange(index, event)}
/>

J'ai corrigé et refactoré votre MonthPicker, de sorte qu'à chaque fois que son value change comme l'incrémentation / décrémentation de l'année et la sélection d'un mois, nous appellerons le onChange prop en passant son nouveau value .

Veuillez consulter la démo ci-dessous et si vous avez des questions, faites-le moi savoir.

Edit next-dynamic-testing-issue (forked)

1
bertdida 28 août 2020 à 13:28

Vous appelez setMonth en cas de modification, mais sans passer une valeur:

onChange={(e) => setMonth(e.target.value)}
0
domenikk 27 août 2020 à 10:42