29

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

結合された複数のテキスト フィールドを示すスクリーンショット。

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

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

4

1 に答える 1

60

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

1. formKey(Redux Form 5) の使用

formKeyredux-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 Form 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!
于 2016-05-26T14:41:01.167 に答える