Formik，多步表单制作按钮禁用答案

【问题标题】：Formik, multi step form making button disableFormik，多步表单制作按钮禁用
【发布时间】：2019-11-12 17:15:52
【问题描述】：

我有一个多步骤形式的 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>
              );
            }}
          />

【问题讨论】：

将enableReinitialize 标志设置为true。我认为它会解决你的问题。是默认false
我也面临同样的问题，将 enableReinitialize 设置为 true 没有帮助。

标签： javascript reactjs validation formik

【解决方案1】：

将enableReinitialize 标志设置为true。我认为它会解决你的问题。在 formik 中默认为 false。

【讨论】：

【解决方案2】：

希望将来有人会发现此答案有用。

要最初禁用多步骤表单中的 提交/下一步 按钮以及 isValid 属性，您必须包含 formik 的 dirty 属性。 Thanks to this answer.

所以代码将如下所示：disabled={!(isValid && dirty)}

这将在每次步骤更改时禁用提交/下一步按钮，直到验证所有可能引发错误的字段。

【讨论】：