验证Formik js

Question

我已经用react native实现了formik。我使用formik : 2.1.4，yup: 0.29.1，react native: 0.62。我将验证与yup一起使用，但验证只在模糊时触发。如何在更改文本上触发验证？

  <Formik
      enableReinitialize
      initialValues={{
        phoneNumber: props.phoneNumber,
      }}
      onSubmit={values => {
        console.log('Login Submit');
      }}
      validateOnMount={true}
      validationSchema={yup.object().shape({
        phoneNumber: yup
          .string()
          .required()
          .min(8)
          .matches(regexPhoneNumber, 'Phone number is not valid'),
      })}>
      {({
        // values,
        handleChange,
        errors,
        setFieldTouched,
        touched,
        isValid,
        handleSubmit,
      }) => (
          <View style={styles.form}>
            <View style={styles.subContainer}>
              <View style={styles.containerTitle}>
                <Text style={styles.textTitle}>+62</Text>
              </View>
              <View style={styles.containerPhoneNumber}>
                {renderFocus()}
                <TextInput
                  onFocus={() => props.setFocus(true)}
                  value={props.phoneNumber}
                  style={styles.subContainerPhoneNumber}
                  placeholderStyle={styles.placeholder}
                  placeholder={'Type your phone number'}
                  onChangeText={(value) => {
                    handleChange('phoneNumber');
                    props.changePhoneNumber(value);
                  }}
                  keyboardType={'numeric'}
                  onBlur={() => setFieldTouched('phoneNumber', true)}
                />
              </View>
            </View>
            {touched.phoneNumber && errors.phoneNumber && (
              <View style={styles.containerError}>
                <Text style={styles.textError}>Phone number is not valid</Text>
              </View>
            )}
            <View style={styles.containerButton}>
              <TouchableOpacity
                disabled={!isValid}
                id={'nextButton'}
                accessible={true}
                accessibilityLabel={'nextButton'}
                // eslint-disable-next-line react-native/no-inline-styles
                style={{
                  backgroundColor: isValid ? color.thema : color.grey,
                  paddingHorizontal: responsiveWidth(8.3),
                  paddingVertical: responsiveHeight(2.2),
                  justifyContent: 'center',
                  alignItems: 'center',
                  borderRadius: 5,
                }}
                onPress={() => handleSubmit}>
                <Text style={styles.textButton}>Next</Text>
              </TouchableOpacity>
            </View>
          </View>
        )}
    </Formik>

有了这段代码，模糊文本输入的触发器上的验证。我需要在更改文本上触发验证。

Answer 1

在onChangeText中也放入setFieldTouched('phoneNumber', true)行。

...
...
<TextInput
  onFocus={() => props.setFocus(true)}
  value={props.phoneNumber}
  style={styles.subContainerPhoneNumber}
  placeholderStyle={styles.placeholder}
  placeholder={'Type your phone number'}
  onChangeText={(value) => {
    setFieldTouched('phoneNumber') // add here also
    handleChange('phoneNumber');
    props.changePhoneNumber(value);
  }}
  keyboardType={'numeric'}
  onBlur={() => setFieldTouched('phoneNumber')}
/>
...
...