Große react-redux Form App

Ich habe an Überarbeitung eines der Module in meiner Firma mit react gearbeitet, das Modul ist eine einzelne Seite zusammensetzbar von 4-5 verschiedenen Formen, Auswahlen in jeder Form gemacht werden bestimmen dann das Aussehen des nächsten Formularschritts.Große react-redux Form App

Es gibt viele "statische" Eingabefelder, die den visuellen Status der App nicht beeinflussen, aber zum Senden an den Server benötigt werden, andere Eingaben ändern den ui-Status.

Ich bin auf der Suche nach dem richtigen Ansatz für diese Art von Anwendungen, da scheint OnChange-Ereignis an jedem einzelnen Eingang (es gibt mehr als 100 Eingänge insgesamt auf der ganzen Seite). Ich habe react-redux-forms plugin verwendet, aber es ist zu viel von einer Blockbox für mich, da ich direkten Zugang zum Staat haben und Entscheidungen treffen muss. Ich würde es vorziehen, mehr Kontrolle über den Staat zu haben.

Ist die richtige Lösung, onChange-Ereignis für jede Eingabe zu binden? Oder gibt es einen besseren Ansatz?

Quelle

2016-07-07 Dima Grossman

Es könnte sich lohnen, darüber nachzudenken, die Form in kleinere Stücke zu zerlegen und eine Art Assistenten-ähnlicher Ansatz zu verwenden. Es könnte auch gut sein, einen Blick auf die Redux-Form-Bibliothek zu werfen, wo die neueste Version eine Reihe von Verbesserungen in Bezug auf das genaue Problem der Beschreibung hat. – Deep

Ich habe das gesamte Formular in kleine Komponentenblöcke getrennt, meine Frage ist mehr darüber, wie der Status bei Änderung für jedes verfügbare Eingabefeld mitgeteilt wird. Ich werde wieder in reaktionsreduktive Formen schauen –

Wir machen das mit redux-form ganz einfach. Da alles in der fields Stütze gehalten wird, könnten Sie so etwas tun:

const Form = ({ 
    fields, 
    handleSubmit, 
    saveForm 
}) => (
    <form onSubmit={handleSubmit(saveForm)}> 
    <fieldset> 
     <input type="text" {...fields.hasAlternativeDelivery} /> 
    </fieldset> 
    {fields.hasAlternativeDelivery.value === true && 
     <fieldset> 
     {/* more fields go here */} 
     </fieldset> 
    } 
    </form> 
);

Wir dann validieren bedingt bestimmte Fieldset like this. Also, um Ihre Frage zu beantworten: Sie sollten sich nicht auf Änderungsereignisse verlassen, um bestimmte Felder zu verstecken/anzuzeigen, dies widerspricht der Natur von React (Reaction ist deklarativ, was Sie beschreiben, ist ein zwingender Weg, Dinge zu tun). Ermitteln Sie stattdessen, welcher Status (/ Props) zu welcher UI führen soll.

Quelle

2016-07-07 08:17:44 Steven

Große react-redux Form App

Antwort

Verwandte Themen