Ich betrachte die Beispiele in der Referenz für controlled form components in react.js offiziell website , frage ich mich, wie soll man ein form implementieren, in dem man remove und add input elements dynamisch so darstellen könnte, dass es sich um gesteuerte Komponenten handelt? Ist das überhaupt möglich?
In den Beispielen können wir sehen:
%Vor% Aufgrund der Art meiner Arbeit muss ich oft solche Formulare implementieren. Außerdem, ich nicht add oder remove input Elemente direkt - ich verwalte benutzerdefinierte Komponenten, aber der Einfachheit halber hier bin ich für grundlegende Formularelemente.
Wie können Eingabeelemente dynamisch hinzugefügt / entfernt werden?
Ja, es ist möglich, Sie können input elements dynamically hinzufügen / entfernen, aber dafür müssen Sie auf einige Dinge achten:
1 - Korrekte Bindung von Ereignissen.
2 - Array, um die Werte jedes Eingabeelements separat zu speichern.
3 - Wenn Benutzer einen Wert in einem Eingabeelement eingeben und dann nur diesen bestimmten Wert im Status aktualisieren.
Logik:
Pflegen Sie ein Array innerhalb des Status, in dem die Werte gespeichert werden. Verwenden Sie # array.map Erstellen von UI (Eingabeelement) für jedes Array Werte. Während der Erstellung der Felder, verwenden Sie eine remove button mit jedem Feld und übergeben Sie den Index des Feldes in dieser function , es wird Ihnen helfen, zu identifizieren, welches Feld Sie löschen möchten, das gleiche für onChange auch tun.
Überprüfen Sie dieses Beispiel:
Überprüfen Sie die Arbeit jsfiddle : Ссылка
Sie können Ihren Status oder die Requisiten, die Sie von anderen Komponenten übergeben, einfach verwenden, um zu entscheiden, wie Ihr Formular aussehen soll.
Hier ein dummes Beispiel:
%Vor%Ich habe es in der Render-Methode gemacht, nur um klar zu sein, aber die ganze Logik kann in Hilfsfunktionen verschoben werden.
Tags und Links javascript web-component reactjs