J'essaie d'ajouter un champ de formulaire en cascade (interne) de manière dynamique en cliquant sur un bouton + Ajouter du contenu . Le tableau du champ est mis à jour mais la vue est toujours la même.
Cependant, lorsque j'essaie d'ajouter le champ extérieur en cliquant sur un bouton + Ajouter un titre , il est ajouté de manière dynamique sans aucun problème. Vous trouverez ci-dessous l'URL de stackblitz pour référence. Merci d'avance.
https://stackblitz.com/edit/react-utjwsu? embed = 1 & file = index.js
3 Réponses :
Vous n'affichez qu'un seul champ de contenu et la syntaxe {this.AddContentInput} n'est pas valide. Vous pouvez modifier la méthode AddContentBox pour afficher tous les champs de contenu:
Original:
AddContentFields(element) {
return element.Content.map(content => {
return (
<FormGroup>
<Label className="set-label-pos upload-img" for="Heading">Content</Label>
<input className="form-control" type="text"/>
</FormGroup>
);
})
}
Remplacé par:
...
{ this.AddContentFields(element) }
...
et
...
<FormGroup>
<Label className="set-label-pos upload-img" for="Heading">Content</Label>
<input className="form-control" type="text"/>
</FormGroup>
{this.AddContentInput}
...
Voici une version modifiée de l'application avec mes modifications: https://stackblitz.com/edit/react-lcy2te
Merci à tous pour votre aide rapide. Appréciez-le :)
Vous mélangez la variable de contenu. Dans votre fonction AddContentBox () vous utilisez this.state.content.map(...)
this.state.content est un tableau d'objets comme {Heading: '', Content: [{value: ''}]}
MAIS dans votre fonction AddContentInput () vous insérez un objet dans un objet de ce tableau contents [index] .Content.push ({valeur: ''})
Selon vos besoins, vous devez soit pousser dans le tableau racine contents.push ({Heading: '', Content: [{value: ''}]} OU itérer le bon tableau dans votre fonction AddContentBox () et utiliser this.state.content[0edral.Content.map(...)
Votre code fonctionne correctement et l'état se met parfaitement à jour. Le problème est que la partie Contenu n'est ajoutée qu'une seule fois dans votre code. Je viens d'utiliser une fonction que vous avez déjà ajoutée dedans
{this.addContentTextBox (element.Content)}
Remplacez simplement la fonction AddContentBox avec ceci:
AddContentBox(){
return this.state.content.map((element,i)=>(
<div className="header-content" key={i} >
<div className="heading-content-wrapper">
<FormGroup>
<Label className="set-label-pos upload-img" for="Heading">Heading</Label>
<input className="form-control" type="text"/>
</FormGroup>
{this.addContentTextBox(element.Content)}
{this.AddContentInput}
<FormGroup>
<Button color="success" onClick={this.AddContentInput.bind(this,i)}>+ Add Content</Button>
</FormGroup>
</div>
</div>
))
}
Vous avez le code dans ce fichier, mais je pense que vous avez oublié de l'ajouter dans la fonction.
J'espère que cela aide :)