React-Native (0.64.2) Formik handleSubmit onSubmit 不触发

如何解决React-Native (0.64.2) Formik handleSubmit onSubmit 不触发

相关模块：

Formik：“2.1.4”

是的：“0.28.5”

React-Navigation v5

所以我已经为一个简单的 formik 问题苦苦挣扎了一天，我确定我一定遗漏了一些东西，但我希望得到一些帮助，因为我看不出我做错了什么。

我有两个文件：Login/index.tsx & Login/LoginForm.tsx

Login/index.tsx 大部分看起来像这样：

  const handleSubmit = async (values) => {
    console.log("values submitted == ",values)
  }

  return (
    <View style={Styles.container}>
      <CircleIconButton
        size={60}
        backgroundColor={'white'} 
        onPress={goBack}
      >
        <Icon name={'arrow-left'} type={'FontAwesome5'} style={{ color: Colors.primaryOrange}} />
      </CircleIconButton>

      <Text style={[Typography.title,{color: 'white',marginTop: '30%'}]}>
        Login
      </Text>
      <Text style={[Typography.titleDesc,marginTop: '3%',marginBottom: '8%'}]}>
        Securely login to your account
      </Text>

      <Formik
        initialValues={formInitialValues}
        onSubmit={handleSubmit}
      >
        <LoginForm />
      </Formik>
      
    </View>
  )

Login/LoginForm.tsx 大部分看起来像这样：

const {handleChange,handleSubmit,values,isSubmitting,isValidating} = useFormikContext();

const { navigate } = useNavigation()

return (
    <View style={Styles.container}>
      <IVTextInput
        onChangeText={handleChange('email')}
        value={values?.email}
        editable
        fieldLabel={"Phone/Email"}
      />
      <IVTextInput
        isPassword
        editable
        containerStyle={{ marginTop: '8%',marginBottom: '15%' }}
        onChangeText={handleChange('password')}
        value={values?.password}
        fieldLabel={"Your Password"}
      />
      <RoundedButton
        block
        onPress={handleSubmit}
      >
        Log In
      </RoundedButton>
      <View style={{...allCenter,marginTop: '7%'}}>
        <Text
          style={[Typography.titleDesc,Styles.signupTextButton]}
          onPress={() => navigate('Signup')}
        >
          Don’t have an account? Register
        </Text>

        <Text style={[Typography.titleDesc,marginTop: '8%'}]}>
          Forgot Password
        </Text>

      </View>
    </View>
  )

LoginForm 由 <Formik> 标签包裹。然后我尝试访问 LoginForm.tsx 文件中的 formik 上下文。

我尝试过的事情：

• 在 values 变量发生变化时打印它（从我在文本字段中输入），我可以看到 values 对象正在跟踪我的击键

• 打印 isSubmitting 和 isValidating，并且在任何时候都没有 isSubmitting = true AND isValidating = false。当我提交 isSubmitting == true 和 isValidating == true 时。 Formik 的文档似乎表明，当 isValidating == false && isSubmitting == true 时，我知道我的表单何时提交，但这还没有发生。 >

• 创建 Yup 架构，但我也尝试删除 Login/index.tsx 文件内 <Formik> 标记内的 yup 架构，无论哪种方式，当我点击登录按钮时，onSubmit 和 handleSubmit 函数都不会执行任何操作。

• 放入一个简单的 console.log() 语句来测试对我的 <RoundedButton> onPress 道具的操作是否有效，并且它有效，我的 console.log() 出现在控制台输出。

• 从 <Formik> 开始标签内的 validate 道具返回一个空对象，因为我从网上查看得到的普遍共识是，当验证失败

有趣的信息：当我使用validationSchema时，我故意违反了验证，当我打印错误时，对象为空

要点是。 . .我试过的任何东西似乎都没有得到 onSubmit 或 handleSubmit 函数触发。请让我知道我能成为什么 做错了，任何帮助将不胜感激。

谢谢