Question

我有一个带有多步骤表格的Formik。每个步骤都是用户必须填写的组件。组件根据“ activeStep”状态进行渲染。如果用户尚未填写表格，则无法继续下一步，并且“下一步”按钮被禁用。如果用户填写了必填字段，则下一个按钮将变为活动状态。我用“ isValid”属性连接了“下一步”按钮。

<button disabled={ !isValid }>

如果出现一些错误或输入为空，则所有按钮都可以正常工作，而下一按钮保持禁用状态。但是当下一个组件呈现时，“ isValid”属性将保持为真，直到我按任意输入，然后它变为false且下一个按钮被禁用。我需要在渲染新组件时立即禁用“下一步”按钮，而无需关注任何输入。

//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>
              );
            }}
          />

Answer 1

将enableReinitialize标志设置为true。我认为它将解决您的问题。默认情况下，它是false格式。

Answer 2

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

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

所以代码看起来像这样：disabled={!(isValid && dirty)}

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

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

2 个答案: