最初未禁用 Formik 按钮

Question

我正在使用 Formik 验证，如果未满足验证模式，我将尝试禁用该按钮。它应该是一个 phone 数字，所以如果我键入字母，该按钮将被禁用。有用。

但是，最初当我打开屏幕并且文本字段为空时，该按钮应该仍处于禁用状态。但事实并非如此。即使验证模式显示 'required'。我该如何解决这个问题？

<Formik
              initialValues={initialValues}
              onSubmit={handleSubmitForm}
              validationSchema={validationSchema}>
              {({ handleChange, handleBlur, handleSubmit, values, isValid }) => (
                <View style={styles.searchFieldContainer}>
                  <View style={styles.form}>
                    <FieldInput style={styles.fieldInput}
                      handleChange={handleChange}
                      handleBlur={handleBlur}
                      value={values.phoneNumber}
                      fieldType="phoneNumber"
                      icon="phone"
                      placeholderText="49152901820"
                    />
                    <ErrorMessage
                      name="phoneNumber"
                      render={(msg) => (
                        <Text style={styles.errorText}>{msg}</Text>
                      )}
                    />
                  </View>
                  <View style={styles.buttonContainer}>
                <Button
                  block
                  success
                  disabled={!isValid}
                  onPress={handleSubmit}
                  style={styles.button}>
                  <Text>Speichern</Text>
                </Button>
                  </View>
                </View>
              )}
            </Formik>

const phoneNumberValidationSchema = yup.object().shape({
  phoneNumber: yup
    .string()
    .label('phoneNumber')
    .required('Bitte gebe deine Handynummer ein.')
    .matches(/^[0-9]*$/, 'Bitte nur Ziffern eingeben.'),
});

Answer 1

尝试将 Formik 组件上的 isInitialValid 属性设置为 false。

<Formik
  initialValues={initialValues}
  onSubmit={handleSubmitForm}
  validationSchema={validationSchema}
  isInitialValid={false}
>
  ...
</Formik>

最初未禁用 Formik 按钮

Formik button not disabled initially

javascript

typescript

reactjs

react-native

formik