Das einbetten der gleichen redux-form mehrmals auf einer Seite?

Ich habe ein Problem versucht einbetten, mehrere Formulare auf einer Seite. Ich bemerkte configForm einmal ausgeführt, auch mit mehreren Formularen auf der Seite, das ist, warum ich kann nicht dynamisch erzeugen unterschiedliche form-Namen.

Abbildung zeigt mehrere Textfelder miteinander verbunden.

function configForm(){
  const uuid = UUID.generate();

  const config = {
    form:`AddCardForm_${uuid}`,
    fields:['text'],
    validate:validate
  }

  return config;
}

export default reduxForm(configForm(), mapStateToProps, {togglePanelEditMode, addCardToPanel})(CardFormContainer);

Wie kann ich die Formulare so, dass sich diese unabhängig voneinander?

InformationsquelleAutor Kyle | 2016-05-26
  1. 57

    Es gibt zwei Möglichkeiten zum einbetten der gleichen form mehrmals auf die Seite.

    1. Mit formKey (Redux Form 5)

    formKey ist der offizielle Weg, dies zu tun, wenn mit redux-form@5 (oder unten). Sie müssen übergeben Sie die Schlüssel von den Eltern zu identifizieren, form:

    panels.map(panel =>
  <PanelForm key={panel.uuid} formKey={panel.uuid} initialValues={panel} />
                              ^^^^^^^ 
                       declare the form key
)

    Ihre form definition wäre:

    reduxForm({form: "AddCardForm", fields: ["text"], validate})

    Jedoch dieses Muster wurde entfernt redux-form@6.

    2. Mit einer einzigartigen form name (Redux Form 5 und höher)

    Dem folgenden Muster ist die empfohlene Methode zur Identifizierung von Formen seit Redux Form 6. Es ist voll kompatibel mit vorherigen Versionen.

    panels.map(panel =>
  <PanelForm key={panel.uuid} form={`AddCardForm_${panel.uuid}`} initialValues={panel} />
                              ^^^^ 
                    declare the form identifier
)

    Ihre form definition wäre:

    reduxForm({fields: ["text"], validate})
//No `form` config parameter here!
    • Vielen Dank für diese. Sehr fast diese Frage wieder ... wünschte, es kam in meine web-Suche!!
    • Danke. Die version info in zwei Optionen konnte geklärt werden, ein bisschen. Mein Vorschlag: 1. ... (Redux Form 5), 2. ... (Redux Form 6+)
    • Ich bemerkte, dass Sie schrieb, dass die >5 Muster empfohlen. Diese Super Antwort, das problem hatte ich, aber nie gesehen, das in den docs überall. Wo hast du es gesehen?
    • Ich kann mich nicht erinnern. Der doc sagt, form: der name des Formulars und der Schlüssel zu, wo Sie Ihre form den Staat wird montiert werden unter der redux-form reducer. Da Sie nicht wollen, zu teilen die gleichen Daten, das ist der Weg zu gehen. Siehe github.com/erikras/redux-form/issues/...
    • Wow, das war töten mich seit Monaten. Ich vermutete immer, aber docs nie angegeben, so dass ich immer dachte, wie sollen wir Dinge tun, ist legen Sie form nur in der reduxForm({form:'blah'})(MyFormComponent) Linie. Absolut mich getötet. Wie kommen Sie auf diese nicht dokumentiert. Und warum einmal die Mühe, Sie dokumentieren den schlechten Weg. Reagieren ist über wiederverwendbare Komponenten, die form ist wiederverwendbar, aber mit reduxForm({form:'blah'})() Methode wird es nicht wieder richtig? So irreführend - redux-form.com/7.0.3/docs/api/ReduxForm.md/... - es sollte beachten Sie die conseuqnece keine reusabilty
    • Was ist, wenn wir eine Verbindung herstellen müssen, jede form zu Staat über formValueSelector? Ich habe eine separate Frage für ihn: stackoverflow.com/questions/56635325/...

    InformationsquelleAutor Florent
Schreibe einen Kommentar