web-dev-qa-db-fra.com

Comment remplacer un composant par un autre lors d'un événement (clic du bouton) dans react js

J'ai une longue liste d'affichage de données divisée en blocs avec un bouton d'édition à côté de chaque bloc, comme ceci:  enter image description here

Chaque fois que le bouton d'édition est cliqué, je dois remplacer le composant d'affichage par le composant d'édition, en remplaçant le texte par la forme, comme ceci

 enter image description here

quel serait le meilleur moyen de faire cela . J'ai essayé de mettre les composants à l'intérieur de l'état en tant que liste et de remplacer le composant d'affichage par le composant de formulaire, lorsque vous cliquez sur Modifierso au lieu de le retourner depuis render ():

return(
 <Display />
 );

Maintenant je reviens:

return(
 {this.state.components[0]}
  );

et quand le bouton est cliqué faisant ceci

this.setState({components:[<EditForm />]})

Cela fonctionne mais je me demandais si entreposer Component et JSX inside était une bonne idée/une pratique professionnelle? 

reactjsjsx
3
Yogesh

Mieux, vous pouvez utiliser des instructions conditionnelles pour afficher les composants masqués en fonction de vos besoins.

Exemple: 1) Conservez le mode (i.e) du composant à afficher pour masquer les zones de saisie 2) Cliquez sur le bouton pour changer le statut en vrai ou en faux 3) Il affichera/masquera

Bonne codage!

0
Abdul Hameed

Je tiens à l'état juste un booléen pour montrer le formulaire d'édition ou l'affichage et basculer ceci sur le clic de bouton.

Ensuite, dans votre méthode de rendu, il suffit d’une instruction if simple pour choisir le rendu, par exemple.

render() {
    if (this.state.edit) return <EditForm />
    return <Display />
}
0
Rcc27