Redux表單從其他選項卡/組件獲取值

Question

我必須實現一個少於30個不同字段的表單。 因此，我決定將它們拆分為2個不同的容器組件，並使用兩個標簽在它們之間進行導航。

我使用redux-form處理數據綁定。

對於on組件，我可以從一個組件的handleSubimit獲取值。 但是最終驗證必須僅在最后一個標簽中。 從這里，我只能訪問第二個選項卡的值。 就像從存儲中清除掉的數據一樣。

如何訪問我以前的數據所在的商店？

TabNavigationBar.js

import React from 'react';
import TabNavigationItem from './TabNavigationItem';

const TabNavigationBar = ({ onTabChange, activeTab }) => {
  const tabList = [
    { hasIcon: 'fas fa-user-circle', hastext: 'Information Utilisateur' },
    { hasIcon: 'fas fa-file-alt', hastext: 'Informations contrat' }
  ];

  const clickOnTab = tabNumer => {
    onTabChange(tabNumer);
  };

  return (
    <div className="columns">
      <div className="column is-offset-one-quarter-desktop is-offset-one-thirds-tablet is-half-desktop is-one-thirds-tablet">
        <div className="tabs is-toggle is-fullwidth">
          <ul>
            {tabList.map((tab, i) => (
              <TabNavigationItem
                key={i}
                tabSelected={() => clickOnTab(i)}
                hasClass={activeTab === i ? 'is-active' : ''}
                hasIcon={tab.hasIcon}
                hasText={tab.hastext}
              />
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
};

export default TabNavigationBar;

UserForm.js

import React from 'react';
import { reduxForm } from 'redux-form';

import CiviliteRadioButton from './CiviliteRadioButton';
import NameInputs from './NameInputs';
import AddressInputs from './AddressInputs';
import MailAndDOB from './MailAndDOB';
import TelephoneInputs from './TelephoneInputs';

let UserForm = ({ handleSubmit }) => {
  return (
    <div>
      <CiviliteRadioButton />
      <NameInputs />
      <AddressInputs />
      <MailAndDOB />
      <TelephoneInputs />
    </div>
  );
};

UserForm = reduxForm({
  form: 'form1',
  initialValues: {
    user: {
      adresse: {
        country: 'France'
      },
      civilite: 'Madame'
    }
  }
})(UserForm);

export default UserForm;

ContractForm.js

import React from 'react';
import { reduxForm } from 'redux-form';
import InputItem from '../InputItem';

import ContratInputsList from './contratInputList';

let ContratForm = ({ handleSubmit }) => {
  const submit = values => {
    console.log(values);
  };

  return (
    <div>
      <div className="columns is-multiline ">
        {ContratInputsList.map((item, i) => {
          return (
            <div className="column is-half" key={i}>
              <InputItem spec={item.spec} />
            </div>
          );
        })}
      </div>
      <div className="columns">
        <div className="column">
          <div className="field is-grouped is-grouped-right">
            <input
              className="button is-primary"
              onClick={handleSubmit(submit)}
              type="submit"
              value="Envoyer"
            />
          </div>
        </div>
      </div>
    </div>
  );
};

ContratForm = reduxForm({
  form: 'form2'
})(ContratForm);

export default ContratForm;

編輯

當我單擊選項卡時，將調用redux-form / DESTROY並擦除form1的數據。

Answer 1

嘗試在reduxForm（options） destroyOnUnmount標志設置為false 。