web-dev-qa-db-ja.com

同じreduxフォームをページに複数回埋め込むにはどうすればよいですか？

1つのページに複数のフォームを埋め込もうとすると問題が発生します。ページに複数のフォームがある場合でも、configFormが1回実行されることに気付いたので、異なるフォーム名を動的に生成できません。

一緒にバインドされた複数のテキストフィールドを示すスクリーンショット 。

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

フォームを互いに独立して動作するように追加するにはどうすればよいですか？

reactjsreduxredux-form
28
Kyle

同じフォームをページに複数回埋め込むには2つの方法があります。

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名を使用する（Reduxフォーム5以降）

次のパターンは、Redux Form 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!
57
Florent