Мастер редукции с помощью ant.design или antd Steps

Я хочу использовать redux-form с antd, обычные компоненты можно обрабатывать через компонент renderField, но я хочу использовать antd Steps https://ant.design/components/steps/ с сокращенной формой. Как это реализовать? Может ли кто-нибудь направить меня?


redux-form react-redux-form antd wizard
person dev123    schedule 25.07.2017    source источник
comment
В Stack Overflow вы получите лучшую помощь, если сделаете первые усилия для решения проблемы самостоятельно и зададите вопросы (пока покажете свой код), когда у вас возникнут проблемы.   -  person Jesper We    schedule 29.07.2017
comment
это правда, что в основном я новичок в redux-form, мы уже использовали antd, поэтому все еще нужно поработать над redux-form, он работал довольно хорошо с другими элементами управления, bc, мы можем передать renderControl в компонентах, но мастер - это то, что я получил застрявший   -  person dev123    schedule 02.08.2017
comment
Вместо того, чтобы просить общих указаний, вы должны описать, как далеко вы продвинулись (или поняли), и в чем именно вы застряли.   -  person Jesper We    schedule 02.08.2017

Ответы (1)


arrow_upward
1
arrow_downward

Вот откуда я начал:

и вот моя redux-форма с комбинированными шагами antd. <Form /> находится внутри модального окна. Шаги хранятся в хранилище redux. В моем случае шаги контролируются сагой (если ответ успешен> ​​увеличить до шага 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>
);
person Mike    schedule 14.09.2019