Ich habe ein Formular mit verschiedenen Eingabefeldern und zwei Schaltflächen; eine für das Einreichen und eine für das Abbrechen.
%Vor%Ich möchte alle Eingaben löschen, wenn auf die Abbrechen-Schaltfläche geklickt wird. Bisher habe ich es geschafft, indem ich die ref Props jeder Eingabe verwendete.
%Vor% Ich möchte jedoch die Eingabefelder leeren, ohne sie einzeln zu leeren. Ich möchte etwas ähnliches (jQuery): $('#create-course-form input[type=text]').val('');
Die Antwort hängt davon ab, ob Ihre Eingaben kontrolliert oder unkontrolliert sind oder nicht. Wenn Sie sich nicht sicher sind oder weitere Informationen dazu benötigen, sehen Sie sich die offiziellen Dokumente zu an kontrollierte Komponenten und unkontrollierte Komponenten . Danke @ Dan-Esparza für die Bereitstellung der Links.
Beachten Sie auch, dass Zeichenfolgenliterale in% co_de verwendet % ist veraltet . Verwenden Sie stattdessen die Standard-Callback-Methode.
Sie können das gesamte Formular und nicht jedes Formularfeld einzeln löschen.
%Vor% Wenn Ihr Formular kein ref -Attribut hatte, könnten Sie auch id verwenden:
Wenn Sie kontrollierte Formularfelder verwenden, müssen Sie möglicherweise jede Komponente in Ihrem Formular explizit zurücksetzen, je nachdem, wie Ihre Werte im Status gespeichert sind.
Wenn sie einzeln deklariert sind, müssen Sie jedes explizit zurücksetzen:
%Vor%Demo unten:
Es gibt jedoch einen saubereren Weg, dies zu tun. Anstatt prozentual ref state Eigenschaften und n Event Handler zu haben, können wir den Code mit etwas cleverem Code drastisch reduzieren.
Im Konstruktor deklarieren wir einfach ein leeres Objekt, das zum Speichern von Eingabewerten verwendet wird. Wir verwenden nur einen Eingabehandler und übergeben ihm den Index des Eingabeelements, dessen Wert geändert werden soll. Dies bedeutet, dass der Wert einer einzelnen Eingabe in dem Moment erzeugt wird, in dem wir anfangen, in sie einzugeben.
Um das Formular zurückzusetzen, müssen wir unser Eingabeobjekt wieder auf leer setzen.
Der Eingabewert ist n . Wenn this.state.inputVal[i] nicht existiert (wir haben noch nichts in diese Eingabe eingegeben), möchten wir, dass der Wert eine leere Zeichenfolge (anstelle von null) ist.
Demo unten:
Der folgende Code sollte das Formular mit einem Klick zurücksetzen.
Tags und Links reactjs