React Native 使用Formik响应本地验证

7uhlpewt  于 2022-11-25  发布在  React
关注(0)|答案(1)|浏览(198)

大家好,我在我的应用程序中使用formik验证TextInput验证正在工作并获得输入的值,我有一个下拉菜单,我正在使用react-native-element-dropdown,但我没有获得选定的值,在添加formik验证之前,我可以获得选定的值,如果我缺少任何东西,请让我知道。

    • 添加验证之前**:
const [Experience, setExperience] = useState("");
    <Dropdown
                  style={[styles.dropdown, experienceTypeFocus && { borderColor: "blue" }]}
                  placeholderStyle={styles.placeholderStyle}
                  selectedTextStyle={styles.selectedTextStyle}
                  inputSearchStyle={styles.inputSearchStyle}
                  itemTextStyle={styles.itemText}
                  iconStyle={styles.iconStyle}
                  data={experienceTypeData}
                  labelField="label"
                  valueField="value"
                  placeholder="Experience"
                  searchPlaceholder="Search..."
                  value={Experience}
                  onChange={(item) => {
                    setExperience(item.value);
                    setExperienceTypeFocus(false);
                  }}
                />
    • 添加验证后:**
<Formik
              validateOnMount={true}
              validationSchema={createJobValidationSchema}
              initialValues={{
                Experience: "",
                Budget: "",
                Jobdescription: "",
                Skills: "",
              }}
              onSubmit={(values) => console.log(values, "Values")}
            >
              {({
                handleChange,
                handleBlur,
                handleSubmit,
                values,
                errors,
                touched,
                isValid,
              }) => (
    <Dropdown
                          style={[
                            styles.dropdown,
                            experienceTypeFocus && { borderColor: "blue" },
                          ]}
                          placeholderStyle={styles.placeholderStyle}
                          selectedTextStyle={styles.selectedTextStyle}
                          inputSearchStyle={styles.inputSearchStyle}
                          itemTextStyle={styles.itemText}
                          iconStyle={styles.iconStyle}
                          data={experienceTypeData}
                          labelField="label"
                          valueField="value"
                          placeholder="Experience"
                          searchPlaceholder="Search..."
                          onChange={() => {
                            setExperienceTypeFocus(false);
                          }}
                          onChangeText={handleChange("Experience")}
                          value={values.Experience}
                        />
 )}
            </Formik>

我有其他的TextInput字段,我可以得到值。

py49o6xq

py49o6xq1#

使用下拉菜单的setFieldValue后,我能够获得值,并且验证工作正常。

<Formik
                  validateOnMount={true}
                  validationSchema={createJobValidationSchema}
                  initialValues={{
                    Experience: "",
                    Budget: "",
                    Jobdescription: "",
                    Skills: "",
                  }}
                  onSubmit={(values) => console.log(values, "Values")}
                >
                  {({
                    handleChange,
                    handleBlur,
                    handleSubmit,
                    values,
                    errors,
                    touched,
                    isValid,
                  }) => (
        <Dropdown
                      style={[ { height:SCREENHEIGHT*.07},
                        styles.jobInputSelect,
                        jobTypeFocus && { borderColor: "blue" },
                      ]}
                      placeholderStyle={styles.jobInputSelect}
                      selectedTextStyle={styles.jobInputSelect}
                      inputSearchStyle={styles.jobInputSelect}
                      itemTextStyle={styles.jobInputSelect}
                      iconStyle={styles.iconStyle}
                      data={jobTypeData}
                      labelField="label"
                      valueField="value"
                      placeholder="Job Type"
                      searchPlaceholder="Search..."
                      value={JobType}
                      onChange={(item) => {
                        setJobType(item.value);
                        setJobTypeFocus(false);
                        setFieldValue("JobType", item.value);
                      }}
                      onChangeText={handleChange("JobType")}
                    />
     )}
                </Formik>

相关问题