Reactjs React Formik-仅在表单提交时触发验证

我在React本机应用程序中使用Formik。在登录表单上，我有两个字段：email和password，它们都是必需的

我写过这样的验证规则：

export const LoginSchema = Yup.object().shape({
  email: Yup.string()
    .email('The email is invalid')
    .required('This field is required'),
  password: Yup.string()
    .min(6, 'The password is too short')
    .max(12, 'The password is too long')
    .required('This field is required'),
});

我只需要在表单提交时触发验证，并显示一个错误弹出窗口。我已经阅读了文档，但找不到解决方案，因为验证会触发onBlur。如何做到这一点

谢谢

const Login = ({ navigation }) => {
  const [isLoading, setIsLoading] = useState(true);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    // Later check for token
    const tokenIsStored = true;

    if (tokenIsStored) {
      setIsLoading(false);
    }
  });

  const onLogin = values => {
    console.log(values, 'on login');

    // Pass value to BE endpoint
    navigation.navigate('Dashboard');
  };

  const onModalClose = () => {
    setIsVisible(false);
  };

  console.log(isVisible);

  if (!isLoading) {
    return (
      <ScrollContainer keyboardShouldPersistTaps="handled">
        <ThemedStatusBar />

        <ThemedModal
          isVisible={isVisible}
          primaryMessage="Log In Failed"
          secondaryMessage="Please check your password"
          btnTitle="OK"
          btnPress={() => onModalClose()}
        />

        <Formik
          initialValues={{ email: '', password: '' }}
          validationSchema={LoginSchema}
          onSubmit={values => onLogin(values)}
        >
          {props => (
            <View>
              <ScrollContainer BackgroundColor={Colors.greyColor} Padding="0px" style={styles.loginForm}>
                <ThemedInput
                  onChangeText={props.handleChange('email')}
                  onBlur={props.handleBlur('email')}
                  value={props.values.email}
                  placeholder="Email"
                  keyboardType="email-address"
                />
                <ThemedInput
                  onChangeText={props.handleChange('password')}
                  onBlur={props.handleBlur('password')}
                  value={props.values.password}
                  placeholder="Password"
                  overrideStyles={styles.loginInputBottom}
                  secureTextEntry
                />
                {props.errors.email && setIsVisible(true)}
              </ScrollContainer>
              <ThemedButton onPress={props.handleSubmit} title="Log In" />
            </View>
          )}
        </Formik>
      </ScrollContainer>
    );
  }
  return <ThemedLoader isLoading />;
};

export default Login;

const Login=（{navigation}）=>{
const[isLoading，setIsLoading]=useState（true）；
const[isVisible，setIsVisible]=useState（false）；
useffect（（）=>{
//稍后检查令牌
const tokenIsStored=true；
如果（存储令牌）{
设置加载（假）；
}
});
const onLogin=值=>{
log（值为“登录时”）；
//将值传递到端点
导航。导航（“仪表板”）；
};
const onModalClose=（）=>{
setIsVisible（假）；
};
console.log（isVisible）；
如果（！isLoading）{
返回(
onModalClose（）}
/>
onLogin（值）}
>
{props=>(
{props.errors.email&&setIsVisible（true）}
)}
);
}
返回；
};
导出默认登录；

检查

您可以根据需要更改

和/或

道具的值来控制Formik何时运行验证。默认情况下，Formik将按如下方式运行验证方法：

---

将道具

validateOnChange={false}

和

validateOnBlur={false}

传递给你的

Formik

是的。你可以这样做

<Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        validateOnChange={false}
        validateOnBlur={false}
        onSubmit={(values, { validate }) => {
            validate(values);
        }}
    >

{
验证（数值）；
}}
>

这对v1也是一样吗？@NaveenVignesh是的，这对我不起作用。