首页 > 解决方案 > Formik 将选定的选项设为布尔值

问题描述

我想检查 selectedOption 是否为“组”,然后将group值设置为 true,否则将其设置为false. 表单组件是这样的:

<Formik
            initialValues={{
              group: null,
              firstName: "",
              surname: "",
              mobile: "",
              email: "",
              policyId: "",
              groupSize: "",
              names: "",
            }}
            onSubmit={(data, { setSubmitting }) => {
              setSubmitting(true);
              setTimeout(() => {
                console.log(data);
              }, 3000);
            }}
          >
            {({
              values,
              handleBlur,
              handleChange,
              handleSubmit,
              errors,
              isSubmitting,
              setFieldValue,
              touched,
            }) => (
              <Form onSubmit={handleSubmit}>
                <IonItem className="f-reg ion-no-padding form-label mb-3">
                  <IonLabel className="sec-color fw-light">
                    Please select
                  </IonLabel>
                  <IonSelect
                    name="group"
                    className="fw-light sec-color"
                    placeholder="Select type..."
                    // trying to check in the onChange Method
                    onIonChange={() => {
                      values.group === true
                        ? setFieldValue("group", values.group)
                        : setFieldValue("group", !values.group);
                    }}
                    onBlur={handleBlur}
                  >
                    <IonSelectOption value={values.group === false}>
                      Individual
                    </IonSelectOption>
                    <IonSelectOption value={values.group === true}>
                      Group
                    </IonSelectOption>
                  </IonSelect>
                </IonItem>
              </Form>
            )}
          </Formik>

我想在提交的表单中返回的是基于 selectedOption 的 group 是 true 还是 false

标签: reactjsionic-frameworkformikionic5

解决方案


推荐阅读