Formik + Yup 模糊所有字段，即使在本机反应中只触摸一个字段

Question

我使用以下教程在 React Native 中创建了表单 https://blog.jscrambler.com/creating-and-validating-react-native-forms-with-formik

一切正常，但只有一个问题。我有 5 个字段名字、姓氏、电子邮件、密码、确认密码。如果我触摸名字字段，当我离开这个字段时，Formik 会使所有字段无效。我没有触及其他字段，但它也在验证其他字段。

<Formik
        validationSchema={SignupSchema}
        initialValues={{
            firstName: '',
            lastName: '',
            email: '',
            password: '',
            confirmPassword: ''
        }}
        onSubmit={postCreateHandler}
    >
        {({ handleChange, handleBlur, handleSubmit, values, errors, touched, isSubmitting }) => (
<View style={LoginStyle.loginFormWrapper}>
<View>
    <InputText
        label="First Name"
        placeholder='First Name'
        autoCapitalize="words"
        autoComplete="name"
        keyboardType="default"
        returnKeyType='next'
        returnKeyLabel='next'
        value={values.firstName}
        onChangeText={handleChange('firstName')}
        onBlur={handleBlur('firstName')}
        error={errors.firstName}
        touched={touched.firstName}
        ref={firstNameRef}
        onSubmitEditing={() => lastNameRef.current?.focus()}
    />
</View>
<View>
    <InputText
        label="Last Name"
        placeholder='Last Name'
        autoCapitalize="words"
        autoComplete="name"
        keyboardType="default"
        returnKeyType='next'
        returnKeyLabel='next'
        value={values.lastName}
        onChangeText={handleChange('lastName')}
        onBlur={handleBlur('lastName')}
        error={errors.lastName}
        touched={touched.lastName}
        ref={lastNameRef}
        onSubmitEditing={() => emailRef.current?.focus()}
    />

</View>
<View>
    <InputText
        label="Email"
        placeholder='Email'
        autoCapitalize='none'
        autoCompleteType='email'
        keyboardType='email-address'
        returnKeyType='next'
        returnKeyLabel='next'
        value={values.email}
        onChangeText={handleChange('email')}
        onBlur={handleBlur('email')}
        error={errors.email}
        touched={touched.email}
        ref={emailRef}
        onSubmitEditing={() => passwordRef.current?.focus()}
    />
</View>
<View>
    <InputText
        label="Password"
        value={values.password}
        placeholder='Password'
        autoCapitalize='none'
        autoCompleteType='password'
        returnKeyType='next'
        returnKeyLabel='next'
        onChangeText={handleChange('password')}
        onBlur={handleBlur('password')}
        error={errors.password}
        touched={touched.password}
        onSubmitEditing={() => confirmPasswordRef.current?.focus()}
    />
</View>
<View>
    <InputText
        label="Confirm Password"
        value={values.confirmPassword}
        placeholder='Confirm Password'
        autoCapitalize='none'
        autoCompleteType='password'
        returnKeyType='go'
        returnKeyLabel='go'
        onChangeText={handleChange('confirmPassword')}
        onBlur={handleBlur('confirmPassword')}
        error={errors.confirmPassword}
        touched={touched.confirmPassword}
        ref={confirmPasswordRef}
    />
</View>
<View style={{ marginVertical: 25 }}>
    <Button
        mode="contained"
        style={buttonStyle}
        labelStyle={buttonLabelStyle}
        onPress={handleSubmit}
    >
        Submit
    </Button>
</View>
</View>

是的验证模式如下：

const SignupSchema = Yup.object().shape({
firstName: Yup.string()
    .min(2, 'Too Short!')
    .max(25, 'Too Long!')
    .required('Required'),
lastName: Yup.string()
    .min(2, 'Too Short!')
    .max(25, 'Too Long!')
    .required('Required'),
email: Yup.string().email('Invalid email').required('Required'),
password: Yup.string()
    .min(8, 'Too Short!')
    .required('Required'),
confirmPassword: Yup.string()
    .required('Required')
    .oneOf([Yup.ref('password'), null], 'Passwords must match')

});

Answer 1

不要传递 error 属性，除非该字段已被触及：

    <InputText
        error={touched.firstName ? errors.firstName : undefined}
        touched={touched.firstName}
    />

Formik + Yup 模糊所有字段，即使在本机反应中只触摸一个字段

Formik + Yup blur all the fields even if only one field is touched in react native

reactjs

react-native

yup

formik