有条件地对组件进行形式验证

Question

已经创建了一个名为familymemberblock的视图，仅当我选择了保险并且在家庭保险下可以正常工作时，才应该查看它，但是当我选择任何其他功能类型时，表单提交按钮将被禁用。

{formik => (
          <form
            className={classes.pageTopSpacing}
            onSubmit={formik.handleSubmit}
          >
            <GridContainer>
              <GridItem xs={12}>
                <GeneralInputFormBlock formik={formik} />

                {formik.values.featureType === 'Insurance' &&
                  formik.values.featureSubType === 'FamilyInsurance' && (
                    <div>
                      <div className={classes.blockSpacing} />
                      <FamilyMemberFormBlock formik={formik} />
                    </div>
                  )}

                <div className={classes.blockSpacing} />
                <PurchaseRulesFormBlock formik={formik} />

                <div className={classes.blockSpacing} />
                <ActivationRulesFormBlock formik={formik} />

                <div className={classes.blockSpacing} />
                <AvailRulesFormBlock formik={formik} />
                <Card>
                  <CardBody>
                    <GridContainer>
                      <GridItem>
                        <Button
                          disabled={
                            submitDisable ||
                            (formik.isValid && !formik.dirty) ||
                            !formik.isValid
                          }
                          color="success"
                          type="submit"
                        >
                          Create feature
                        </Button>
                      </GridItem>
                    </GridContainer>
                  </CardBody>
                </Card>
              </GridItem>
            </GridContainer>
          </form>
        )}
      </Formik>