Question

我想使用带有antd的redux-form正常组件可以通过renderField组件处理，但我想使用带有redux-form的antd Steps https://ant.design/components/steps/。怎么实现这个？有人可以指导我吗？

Answer 1

这是我的出发地：

这是我的redux表格，结合了antd步骤。 <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>
);

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

1 个答案: