首页 > 解决方案 > Formik ,字段填充验证

问题描述

我正在使用 Formik,但我遇到了字段填充验证问题。在里面<Formik>取决于状态我正在渲染带有输入的表单。如果未填写字段,请禁用“下一步”按钮。如何仅对呈现的字段进行验证?

displayForms = (values, step) => {

    const formsComponents = {
      1:<Step1 {...values} />
      2:<Step2 education={values.education}/>,
    };

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

          <Formik
            ref={this.resume}
            initialValues={this.initialValues}
            validate={values => {
              if (values) {
                return !value ? "Required" : "";
              }
            }}
            render={({ values, isValid }) => {
              return (
                <Form>
                  <div className="jobs-resume-panes">
                      {this.displayForms(
                        values,
                        isValid,
                        this.state.activeStep
                      )}
                  </div>                  
                  <div className="jobs-resume-controls">
                      {activeStep === allSteps ? (
                        <button
                          onClick={() => this.submitResume(values, isValid)}
                        >
                          Save
                        </button>
                      ) : (
                        <button
                          disabled={this.state.isDisabled}
                          onClick={this.goNextStep}
                        >
                          Next
                        </button>
                      )}
                    </div>
                  </div>
                </Form>

标签: javascriptreactjsvalidationformik

解决方案


推荐阅读