如何从 Formik 表单调用 Firebase 函数？答案

【问题标题】：How to call a Firebase function from a Formik form?如何从 Formik 表单调用 Firebase 函数？
【发布时间】：2022-11-09 22:36:14
【问题描述】：

我有一个带有 Formik 表单的 LoginScreen.js 和一个带有使用 Firebase 登录用户的逻辑的 FirebaseLogin.js 文件。如何将电子邮件和密码值从 LoginScreen 发送到 FirebaseLogin API？

在LoginScreen.js 我有以下部分，当前正确记录了电子邮件和密码：

    <Formik
        initialValues={{ email: '', password: '' }}
        onSubmit={values => console.log(values)} // this logs the correct values of email and password
    >
        //.. more form code here
        <View>
            <Pressable>
                <Text onPress={handleSubmit}>Login</Text>
            </Pressable>
        </View>
    
    </Formik>

然后我在 FirebaseLogin.js 上有 Firebase API：

export default function FirebaseLogin(props) {
    const email="";
    const password="";

    const auth = getAuth();
    signInWithEmailAndPassword(auth, email, password)
        .then((userCredential) => {
            // Signed in                 
            const user = userCredential.user;
            // ...
        })
        .catch((error) => {
            const errorCode = error.code;
            const errorMessage = error.message;
        });
   
}

但是如何将电子邮件和密码从LoginScreen 传递到FirebaseLogin 逻辑？

我不知何故需要将电子邮件和密码作为道具传递，但FirebaseLogin.js 不是真正的 React 组件，它只是一个 API 函数。所以我找不到办法

【问题讨论】：

将值作为 ...values 传递

标签： reactjs react-native formik

【解决方案1】：

您需要在此处分两步执行此操作。首先你需要修改FirebaseLogin 函数。因为它不是反应组件，所以这里不需要道具。我们只会收到一个带有电子邮件和密码字段的对象。并使用这些字段，我们将登录到火力基地。您的功能将如下所示。

export default function FirebaseLogin({email, password}) {
const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
        // Signed in                 
        const user = userCredential.user;
        // ...
    })
    .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
    });

}

现在将FirebaseLogin 方法从FirebaseLogin.js 文件导入LoginScreen.js 组件。现在在LoginScreen.js 文件中，您的代码将是这样的。

    <Formik
    initialValues={{ email: '', password: '' }}
    onSubmit={values => FirebaseLogin(values)}
>
    //.. more form code here
    <View>
        <Pressable>
            <Text onPress={handleSubmit}>Login</Text>
        </Pressable>
    </View>

</Formik>

如果您有任何困惑，请告诉我。

【讨论】：

非常感谢，就像魅力一样。

【解决方案2】：

一个完整的工作示例是：

import React, { useEffect } from "react";
import { Formik } from "formik";
import { useNavigation } from "@react-navigation/core";
import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
import {
 StyleSheet,
 KeyboardAvoidingView,
 TextInput,
 Button,
} from "react-native";

const UserSignInEmail = ({ email, password }) => {
  const navigation = useNavigation();
  const auth = getAuth();

  signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in
    const user = userCredential.user;
    console.log(user);
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    console.log(errorCode, errorMessage);
  });

useEffect(() => {
  const unsubscribe = auth.onAuthStateChanged((user) => {
    if (user) {
      navigation.replace("Dashboard");
    }
  });

  return unsubscribe;
}, []);

return (
  <KeyboardAvoidingView style={styles.container} behavior="padding">
    <Formik
      initialValues={{ email: "", password: "" }}
      onSubmit={(values) => UserSignInEmail(values)}
    >
      {({ handleChange, handleBlur, handleSubmit, values }) => (
        <>
          <TextInput
            name="email"
            placeholder="Email Address"
            onChangeText={handleChange("email")}
            onBlur={handleBlur("email")}
            value={values.email}
            keyboardType="email-address"
          />
          <TextInput
            name="password"
            placeholder="Password"
            onChangeText={handleChange("password")}
            onBlur={handleBlur("password")}
            value={values.password}
            secureTextEntry
          />
          <Button onPress={handleSubmit} title="Submit" />
        </>
      )}
    </Formik>
  </KeyboardAvoidingView>
);
};

export default UserSignInEmail;

const styles = StyleSheet.create({});

【讨论】：