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

Posted 2023-02-21

【中文标题】Formik，多步表单制作按钮禁用

【英文标题】：Formik, multi step form making button disable

【发布时间】：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 没有帮助。

【参考方案1】：

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

【参考方案2】：

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

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

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

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