React with Firebase - 提交 Formik 表单数据

使用React和Firebase创建Web应用程序是一个非常强大的组合。React是一个流行的JavaScript库，用于构建用户界面，而Firebase是一个强大的后端平台，提供了实时数据库、身份验证、存储和托管等功能。在本文中，我们将介绍如何使用React和Firebase来提交Formik表单数据。

javascript
import React from 'react';
import { Formik, Form, Field } from 'formik';
const MyForm = () => {
  return (
          initialValues={{ name: '', email: '', password: '' }}
      onSubmit={(values, { setSubmitting }) => {
        // 在这里处理表单提交逻辑
        console.log(values);
        setSubmitting(false);
      }}
    >
      
        
          姓名：
          
        
        
          邮箱：
          
        
        
          密码：
          
        
        提交
      
    
  );
};
export default MyForm;

javascript
import firebase from 'firebase/app';
import 'firebase/firestore';
const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID',
};
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
export default db;

javascript
import React from 'react';
import { Formik, Form, Field } from 'formik';
import db from './firebase';
const MyForm = () => {
  return (
          initialValues={{ name: '', email: '', password: '' }}
      onSubmit={(values, { setSubmitting }) => {
        db.collection('users')
          .add(values)
          .then(() => {
            console.log('数据已成功提交到Firebase');
          })
          .catch((error) => {
            console.error('提交数据到Firebase时出错：', error);
          })
          .finally(() => {
            setSubmitting(false);
          });
      }}
    >
      {/* 表单的HTML结构 */}
    
  );
};
export default MyForm;