Реактив подключить 2 кнопки

Question

Здравствуйте, у меня сумасшедшая проблема:

Вот визуализация:

Проблема в том, что у меня есть такая структура:

1) Шаги массива:

| - stepOne

| - stepTwo

| - stepThree

| - stepFour

2) Многоступенчатый компонент:

{здесь логика шагов настройки}

В конце этого компонента

        <div>
          <button className={this.state.showNextBtn}
                  onClick={this.next}>Next</button>
        </div>

onClick - очень важное действие для перехода к следующему шагу.

      next() {
        this.setNavState(this.state.compState + 1)
      }

Далее я должен сделать

const StepOneFormValidation = (props) => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <Field name="name"
        type="text"
        component={renderField}
        label="Username"
        autoFocus
        require/>

      <Field name="email"
       type="email"
        component={renderField}
         label="Email"
        require/>

      <div>
        <button className ="hero_button margin_left" type="submit" disabled={submitting}>Submit</button>
      </div>
    </form>

Так как я могу подключить эти кнопки? Я не могу объявить const в форме компонента и не объявить компонент в const

Весь код: https://pastebin.com/G47ZSfjM

Answer 1

Здесь я вижу два способа:

1: Использовать response-router-redux; Ваши маршруты могут быть такими /form/step1 и после отправки формы make dispatch(push('/form/step2')), не забудьте создать и применить routerMiddleWare с history.

2 Используйте глобальное состояние для «stepper» или передавайте его в качестве реквизита; Представьте себе ваше глобальное состояние:

{currentStep: 1, validate: {form1: true, form2: false, ...}}

Вам необходимо управлять глобальным состоянием «шагового», используя приставку, или получить его, передавая реквизит из компонента <Stepper currentStep={this.props.currentStep}/>.

Было бы намного проще контролировать и понимать все в вашем приложении, если бы оно разбивалось на такие компоненты:

render(){
    return (
       <div>
           <Stepper currentStep={this.props.currentStep}/>
           <Forms currentStep={this.props.currentStep} onSubmit={handleSumbitAndStepSwitching}/>
       </div>
    )
};

А в <Forms /> вы можете сделать Switch-Case для контроля фактической визуализации формы.