2016-05-25 25 views
6

Ich habe meine Räder für eine Weile gedreht und versuche nun, den besten Weg zu finden, all dies zu tun. Hier ist meine Situation:Verwenden von Redux-Form mit React Router

Ich verwende eine Mischung aus React Router und Redux Form, um Login/create Account-Seiten zu erstellen.

export default (
    <Route path='/' component={App}> 
    <IndexRoute component={Signup} /> 
    <Route path='signup_verify' component={SignupVerify} /> 
    </Route>  
); 

Wenn Sie die Homepage laden sie zeigt die Felder ein Konto erstellen

enter image description here

I-Formular verwenden, reagieren die Felder zu validieren und wenn alles in Ordnung ist, ich tun

onSubmit() { 
    this.context.router.push('/signup_verify') 
} 

und schieben sie auf die nächste und letzte Seite des Assistenten. Auf dieser zweiten Seite habe ich eine deaktivierte Eingabe, die ich mit dem Namen füllen möchte, den sie mir im vorherigen Formular gegeben haben. Wie zum Teufel bekomme ich den Namen, den der Benutzer eingereicht hat, um auf dieser zweiten Seite zu erscheinen?

Reagieren Formular Gespräche über die Verwendung von Dekorateure:

@reduxForm({ 
    form: 'myForm' 
}) 

http://redux-form.com/5.2.4/#/api/get-values?_k=eo04uv

https://github.com/erikras/redux-form/issues/260#issuecomment-155852315

ich meine Umgebung auf der Lage sein, Dekorateure zu verwenden, aber wenn ich versuche, den gleichen Code eines implementieren ein paar Zeilen über mir ein Fehler zu sagen:

Warnung.js: 45Warnung: PropTyp fehlgeschlagen e: Ungültige Stütze fields vom Typ object, geliefert an ReduxForm(Signup), erwartet ein Array. Überprüfen Sie die Render-Methode von Connect(ReduxForm(Signup)) .warning @ warning.js: 45 getValues.js: 59

und

Uncaught Typeerror: fields.reduce ist keine Funktion

Meine erste Seite, wo der Screenshot kam aus, sieht sehr ähnlich zu WizardFormFirstPage.js (http://redux-form.com/5.2.4/#/examples/wizard?_k=y8mg56). Wie würde WizardFormSecondPage Daten von WizardFormFirstPage in einer deaktivierten Eingabe anzeigen?

Ich weiß, das ist eine Menge, jede Hilfe wird sehr geschätzt! Auch jede Rückmeldung darüber, wie ich dies auf eine andere Art und Weise machen könnte, wäre fantastisch oder würde meinen derzeitigen Ansatz unterstützen.

Antwort

0

Nach einigen Konsolenprotokolle Ich fand heraus, dass der Eingangswert von der ersten Seite zur nächsten Seite überleben IF:

1) alle Ihre Felder auf der ersten Seite exportieren, oder zumindest die, die Sie möchte zugreifen. IE:

Export const Felder = ['Name', 'E-Mail', 'Firma'];

2) Geben Sie das destroyOnUnmount: false-Flag an, um Formulardaten über Formular-Komponenten-Unmounts beizubehalten.

3) Ziehen Sie es aus der Requisiten auf der nächsten Seite aus dem Assistenten. IE: const {Felder: {Name}, HandleSubmit} = dies.Requisiten;

Dann haben Sie Zugriff auf es unter thing.value. IE:

name.value wird gleich was ich in den Namen eingeben eingegeben auf der ersten Seite.

Docs für weitere Informationen: http://redux-form.com/5.2.4/#/examples/wizard?_k=y8mg56

0

Setzen Sie die Option destroyOnUnmount: false in Ihrem reduxForm() Dekorateur.

Zweitens sollten Sie wahrscheinlich das react-redux Paket verwenden. Es hat eine Funktion namens connect(), mit der Sie den Status an die Requisiten übergeben können.

Ersetzen Sie SignupVerify durch den Namen Ihrer Komponente.

state.form.myForm ändert sich je nach, welche Eigenschaften Sie für reduxForm() eingegeben

Redux usage with React

Redux-Form wizard example