Как вставить одну и ту же редукционную форму несколько раз на страницу?

Question

У меня возникла проблема с встраиванием нескольких форм на одну страницу. Я заметил, что configForm выполняется один раз, даже с несколькими формами на странице, поэтому я не могу динамически генерировать разные имена форм.

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

Как добавить формы, чтобы они не зависели друг от друга?

Answer 1

Существует два способа вставки одной и той же формы несколько раз на страницу.

1. Использование formKey (Redux форма 5)

formKey является официальным способом сделать это при использовании redux-form@5 (или ниже). Вы должны передать ключ от родителя, чтобы определить форму:

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

Ваше определение формы будет:

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

Однако эта модель была удалена из redux-form@6.

2. Использование уникального имени form (Перевождь формы 5 и выше)

Следующий шаблон является рекомендуемым способом идентификации формы, так как форма Redux 6. Он полностью совместим с предыдущими версиями.

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

Ваше определение формы будет:

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