Formik, кнопка многоэтапного создания формы отключена - PullRequest
Новая
       7

Formik, кнопка многоэтапного создания формы отключена

0 голосов
/ 02 июля 2019

У меня есть Formik с многошаговой формой.Каждый шаг - это компонент, который пользователь должен заполнить.Компоненты отображаются в зависимости от состояния «activeStep».Если пользователь не заполнил формы, он не может перейти к следующему шагу и кнопка «Далее» отключена.Если пользователь заполнил обязательные поля, следующая кнопка стала активной.Я связал кнопку «Далее» со свойством «isValid».

<button disabled={ !isValid }>

Все работает нормально, если есть какие-то ошибки или пустые входы, следующая кнопка остается отключенной.Но когда рендерится следующий компонент, свойство isValid остается истинным до тех пор, пока я не нажму на любой вход, а затем оно станет ложным, и следующая кнопка будет отключена.Мне нужно отключить следующую кнопку, как только новый компонент рендерится, не фокусируясь на каком-либо входе

//conditional component rendering
displayForms = (values, isValid,step) => {
    const { activeStep, allSteps, file, isDisabled } = this.state;
    const { resumeSended, resumeFile } = this.props;
    const formsComponents = {
      1: (
        <Step1
          {...values}
          uploadFile={this.uploadFile}
          filename={file ? file.name : null}
          setFile={this.setFile}
          fileLoaded={resumeFile}
        />
      ),
      2: <Step2 education={values.education} item={this.eduValues} />,
      3: <Step3 experience={values.experience} item={this.experienceValues} />,

    };

    switch(step){
      case 1:  return formsComponents[1];
      case 2:  return  formsComponents[2];
      case 3:  return  formsComponents[3];
    }
  };


  <Formik
            ref={this.resume}
            initialValues={this.initialValues}
            render={({ values, isValid,errors}) => {
              return (
                <Form id='myform'>
                  <div className="jobs-resume-panes">
                      {this.displayForms( values, isValid,this.state.activeStep)}

                  </div>
                  {activeStep === allSteps && (
                    <div className="form-block form-block--checkbox">
                      <Field
                        type="checkbox"
                        name="agree"
                        checked={values.agree}
                        id="agree"
                        validate={val => (val ? undefined : 'error')}
                      />
                    </div>
                  )}
                  <div className="jobs-resume-controls">
                    <button
                      type="button"
                      onClick={this.goPrevStep}
                    >
                      Back
                    </button>
                    <div className="jobs-resume-next">
                      {activeStep === allSteps ? (
                        <button
                          onClick={() => this.submitResume(values, isValid)}
                        >
                         Save
                        </button>
                      ) : (
                        <button
                          disabled={ !isValid }
                          onClick={()=>this.goNextStep()}
                        >
                          Next
                        </button>
                      )}
                    </div>
                  </div>
                </Form>
              );
            }}
          />
...