web-dev-qa-db-fra.com

Comment intégrer plusieurs fois le même formulaire redux sur une page?

Je rencontre un problème en essayant d'incorporer plusieurs formulaires sur une seule page. J'ai remarqué que configForm s'exécute une fois, même avec plusieurs formulaires sur la page, c'est pourquoi je ne peux pas générer dynamiquement différents noms de formulaires.

Capture d'écran montrant plusieurs champs de texte liés ensemble .

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);

Comment puis-je ajouter les formulaires pour qu'ils se comportent indépendamment les uns des autres?

reactjsreduxredux-form
28
Kyle

Il existe deux façons d'incorporer le même formulaire plusieurs fois sur la page.

1. Utilisation de formKey (Redux Form 5)

formKey est la manière officielle de procéder lorsque vous utilisez redux-form@5 (ou inférieur). Vous devez passer la clé du parent pour identifier le formulaire:

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

La définition de votre formulaire serait:

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

Cependant, ce modèle a été supprimé de redux-form@6.

2. Utilisation d'un nom form unique (Redux Form 5 et supérieur)

Le modèle suivant est la méthode recommandée pour identifier les formulaires depuis Redux Form 6. Il est entièrement compatible avec les versions précédentes.

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

La définition de votre formulaire serait:

reduxForm({fields: ["text"], validate})
// No `form` config parameter here!
57
Florent