Ich möchte die Redux-Form so verwenden, dass die Eingabefarbe & amp; Zeigt den tatsächlichen Fehler oben auf der Seite an. Wie kann ich auf die Liste der aktuellen Feldfehler außerhalb der Felder selbst zugreifen?
Sie können die Fehlerliste nicht von außerhalb der Renderfunktion erhalten, die der Feldkomponente zugewiesen wurde. Dies liegt daran, dass Fehler nicht im Redux-Speicher gespeichert werden.
Die erste Lösung besteht darin, mehrere Instanzen von Field für denselben Wert zu verwenden. Wenn mehrere Feldkomponenten denselben Namen haben und mit demselben Formularnamen verbunden sind, werden alle mit demselben Wert und derselben Fehlerbehandlung verbunden.
Sie können also eine Feldkomponente verwenden und nur den Fehler rendern.
%Vor% Eine zweite Lösung besteht darin, die globalen Fehlerrequisiten zu verwenden, aber Sie müssen die Fehler aus der Containerkomponente mit reduxForm anzeigen.
Achten Sie darauf, dass dies ein totales Antipater ist! Globale Fehlerreproduktion ist für feldunabhängige Fehler.
%Vor%Sie können immer Fehler aus dem Geschäft erhalten, indem Sie Ihre Validierungsfunktion auf den Wert anwenden, der im Geschäft vorhanden ist. Es kann für eine starke Validierung nicht performant sein, da es bei jedem Rendern eine Validierung durchläuft, so dass es zweimal ausgeführt wird, wenn sich ein Wert ändert, und wenn sich einige andere Requisiten ändern, wird es umsonst ausgeführt. Es kann auch schwierig sein, Async-Validierung durchzuführen.
%Vor% Eine letzte Lösung kann darin bestehen, die Fehler im Speicher zu speichern, indem Sie componentWillReceiveProps implementieren und eine Aktion zur Aktualisierung einer Fehlerliste im Laden senden, aber ich denke nicht, dass das wirklich eine gute Idee ist. Es ist besser, die einfache zustandslose Komponente zum Rendern einer Feldkomponente beizubehalten.
Sie können die vom redux-form bereitgestellten Status-Selektoren verwenden .
Insbesondere wird getFormSubmitErrors Ihnen die Validierungsfehler senden :
Die ursprüngliche, nicht verbundene MyForm -Komponente könnte folgendermaßen aussehen:
Wenn Sie die synchronen Validierungsfehler anzeigen möchten, können Sie stattdessen den getFormSyncErrors Selektor verwenden.
Tags und Links javascript reactjs redux redux-form