Come incorporare più volte lo stesso redux-form su una pagina?

Question

Sto riscontrando un problema nel tentativo di incorporare più moduli su un'unica pagina. Ho notato che configForm viene eseguito una sola volta, anche con più moduli sulla pagina, ecco perché non riesco a generare dinamicamente nomi di moduli diversi.

Screenshot showing multiple text fields bound together.

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

Come posso aggiungere i moduli in modo che si comportino in modo indipendente l'uno dall'altro?

Answer 1

Ci sono due modi per incorporare lo stesso modulo più volte nella pagina.

1. Utilizzando formKey (Redux Modulo 5)

formKey è il modo ufficiale di fare questo quando si utilizza redux-form@5 (o al di sotto). Devi passare la chiave dal padre per identificare la forma:

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

tua definizione del modulo potrebbe essere:

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

Tuttavia, questo modello è stato rimosso da redux-form@6.

2. Utilizzando un unico form nome (Redux Modulo 5 e superiori)

Il seguente modello è il metodo consigliato di identificare forme sin Redux Form 6. è pienamente compatibile con le versioni precedenti.

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

tua definizione del modulo potrebbe essere:

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