同じredux-formをページに複数回埋め込む方法は？

Question

1つのページに複数のフォームを埋め込む際に問題が発生しています。私は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

同じフォームをページに複数回埋め込む方法は2つあります。 redux-form@5（以下）を使用した場合formKey（Reduxの様式5）

formKeyを使用して

1.これを行う公式の方法です。あなたは、フォームを識別するために、親から鍵を渡す必要があり：

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から削除されましたが。次のパターンは、Reduxの形態6ための形態を特定する推奨される方法であり、これは以前のバージョンと完全に互換性のある一意form名（上記Reduxの形態5と）

を使用

2。

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!