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

【问题标题】：Redux-form get the value from other tab/componentRedux-form 从其他选项卡/组件中获取值
【发布时间】：2018-08-25 16:10:06
【问题描述】：

我必须实现一个包含少于 30 个不同字段的表单。因此，我决定将它们拆分为 2 个不同的容器组件，并使用两个选项卡在它们之间导航。

我使用 redux-form 来处理数据绑定。

对于组件，我可以从一个组件的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 的数据。

【问题讨论】：

我明白了为什么您只能从一种表单中获取值，但很难给出解决您问题的答案。在提交每个选项卡时，您必须将值发送到顶级状态/存储，然后稍后检索它们以获取完整图片。现在每个表格都是独立的。因此，通常请确保您的 handleSubmit 表单将数据发送到上层组件 - 例如。 TabNavigationBar - 将其存储在那里，然后再次将其传递给各个选项卡，因此在每个选项卡之后，状态都有更多数据，并且下一个（或唯一的最终）选项卡接收它。
我想我明白你在告诉我什么......所以在我的情况下，handleSubmit 将由选项卡上的 onClick 触发，以将数据发送到正确的位置。然后我的提交按钮将自己进行 HTTP 调用。
是的，我不知道您如何处理其他表单，但如果它们没有“提交”按钮，您需要在单击选项卡时执行此操作。收集所有的表单数据并推送到上层组件的状态（注意：你必须合并所有的tabs数据，所以要确保oyu在改变tabs的时候不要覆盖它）
但是当使用 redux 时，我应该有一个可以在任何地方引用的全局对象？在我的第二个选项卡中，为什么我不能执行 getStore('nameOfTheFormInReduxForm') 之类的操作并从这里合并数据？
让我们continue this discussion in chat。

标签： forms reactjs redux redux-form

【解决方案1】：

尝试在 reduxForm(options) 中将 destroyOnUnmount 标志设置为 false。

【讨论】：