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（选项）中将destroyOnUnmount标志设置为false。

Redux-form从其他选项卡/组件中获取值

1 个答案: