带有 ant.design 或 antd 的 redux-form 向导步骤答案

【问题标题】：redux-form wizard with ant.design or antd Steps带有 ant.design 或 antd 的 redux-form 向导步骤
【发布时间】：2017-07-25 16:47:19
【问题描述】：

我想将 redux-form 与 antd 一起使用，普通组件可以通过 renderField 组件处理，但我想将 antd Steps https://ant.design/components/steps/ 与 redux-form 一起使用。如何实施？有人可以指导我吗？

【问题讨论】：

在 Stack Overflow，如果您自己先努力解决问题，并在遇到问题时提出问题（显示到目前为止的代码），您将获得更好的帮助。
这是真的，基本上我是 redux-form 的新手，我们已经在使用 antd，所以仍然需要在 redux-form 上解决它与其他控件一起工作得很好 b.c 我们可以将 renderControl 传入组件，但向导是我卡住的地方
与其寻求一般指导，您应该描述您已经（或理解）了多远，以及您到底卡在了什么地方。

标签： wizard redux-form antd react-redux-form

【解决方案1】：

这是我的起点：

这是我的结合了 antd 步骤的 redux-form。 <Form /> 在模态框内。步骤存储在 redux 存储中。在我的情况下，步骤由 saga 控制（如果响应成功 > 增加到第 3 步，如果需要额外验证 > 增加到第 2 步等），但您可以通过单击下一步/提交或减少/重置步骤来增加/设置步骤单击上一个/关闭模式。

const Form = ({ hide, isLoading, step, name, setStep }) => (
  <FormCard>
    {step === 1 && <StepOneText name={name} />}
    {step === 2 && <StepTwoText name={name} />}
    {step === 3 && <StepThreeText name={name} hide={hide} />}
    <Steps
      initial={1}
      size="small"
      current={step}
      style={{ padding: '20px 0' }}
    >
      <Step
        status={stepStatus(step)}
        title="Auth"
        icon={<Icon type={step === 1 && isLoading ? 'loading' : 'user'} />}
      />
      <Step
        title="Verify"
        icon={<Icon type={step === 2 && isLoading ? 'loading' : 'solution'} />}
      />
      <Step
        status={step === 3 ? 'finish' : 'wait'}
        title="Done"
        icon={<Icon type="smile-o" />}
      />
    </Steps>
    {step === 1 && <RegisterForm />}
    {step === 2 && <ChallengeForm />}
    {step === 3 && <CallForAction hide={hide} setStep={setStep} />}
  </FormCard>
);

【讨论】：