在React中将Formik表单数据提交到Firebase数据库

Question

我正在尝试找出如何将Formik表单中的表单数据发送到我的React应用程序中的Firebase数据库。

我的表格如下：

import React from 'react'
import { Link } from 'react-router-dom'

// import { Formik } from 'formik'
import { Formik, Form, Field, ErrorMessage, withFormik } from 'formik';
import * as Yup from 'yup';

import { Badge, Button, Col, Feedback, FormControl, FormGroup, FormLabel, InputGroup } from 'react-bootstrap';
import Select from 'react-select';
import firebase from '../../../firebase';

const style1 = {
    width: '60%',
    margin: 'auto'
}

const style2 = {
    paddingTop: '2em',
}

const style3 = {
    marginRight: '2em'
}

const style4 = {
    display: 'inline-block'
}

const options = [
    { value: 'author', label: 'Author' },
    { value: 'reviewer', label: 'Reviewer' },

  ];
class Basic extends React.Component {

  state = {
    selectedOption: null,
  }
  handleChange = (selectedOption) => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
  }
  render() {
    const { selectedOption } = this.state;

        return (
            <Formik
                initialValues={{
                    firstName: '',
                    lastName: '',
                    email: '',
                    password: '',
                    confirmPassword: '',
                    selectedOption: null

                }}

                validationSchema={Yup.object().shape({
                    firstName: Yup.string()
                        .required('First Name is required'),
                    lastName: Yup.string()
                        .required('Last Name is required'),
                    email: Yup.string()
                        .email('Email is invalid')
                        .required('Email is required'),
                    selectedOption: Yup.string()
                        .required('It will help us get started if we know a little about your background'),    
                    password: Yup.string()
                        .min(6, 'Password must be at least 6 characters')
                        .required('Password is required'),
                    confirmPassword:  Yup.string()
                        .oneOf([Yup.ref('password'), null], 'Passwords must match')
                        .required('Confirm Password is required')
                })}

                // onSubmit={fields => {
                //     alert('SUCCESS!! :-)\n\n' + JSON.stringify(fields, null, 5))
                // }}

                // onSubmit={handleSubmit}

                render={({ errors, status, touched }) => (

                    <Form style={style1}>

                    <h1 style={style2}>Get Started</h1>

                        <div className="form-group">
                            <label htmlFor="firstName">First Name</label>
                            <Field name="firstName" type="text" className={'form-control' + (errors.firstName && touched.firstName ? ' is-invalid' : '')} />
                            <ErrorMessage name="firstName" component="div" className="invalid-feedback" />
                        </div>
                        <div className="form-group">
                            <label htmlFor="lastName">Last Name</label>
                            <Field name="lastName" type="text" className={'form-control' + (errors.lastName && touched.lastName ? ' is-invalid' : '')} />
                            <ErrorMessage name="lastName" component="div" className="invalid-feedback" />
                        </div>
                        <div className="form-group">
                            <label htmlFor="email">Email</label>
                            <Field name="email" type="text" placeholder="Please use your work email address" className={'form-control' + (errors.email && touched.email ? ' is-invalid' : '')} />
                            <ErrorMessage name="email" component="div" className="invalid-feedback" />
                        </div>


                        <div className="form-group">
                            <label htmlFor="password">Password</label>
                            <Field name="password" type="password" className={'form-control' + (errors.password && touched.password ? ' is-invalid' : '')} />
                            <ErrorMessage name="password" component="div" className="invalid-feedback" />
                        </div>
                        <div className="form-group">
                            <label htmlFor="confirmPassword">Confirm Password</label>
                            <Field name="confirmPassword" type="password" className={'form-control' + (errors.confirmPassword && touched.confirmPassword ? ' is-invalid' : '')} />
                            <ErrorMessage name="confirmPassword" component="div" className="invalid-feedback" />
                        </div>

                        <div className="form-group">
                        <label htmlFor="selectedOption">Which role best describes yours?</label>

                        <Select
                            value={selectedOption}
                            onChange={this.handleChange}
                            options={options}
                        />
                        </div>
                        <div className="form-group" >
                            <label  htmlFor="consent">By registering you accept the <Link to={'/Terms'}>Terms of Use</Link> and <Link to={'/Privacy'}>Privacy Policy</Link> </label>

                        </div>


                        <div className="form-group">
                            <Button variant="outline-primary" type="submit" style={style3} id="submitRegistration">Register</Button>
                        </div>
                    </Form>
                )}
            />

    );
  }
}

export default Basic; 

我在Firebase（云Firestore）中有一个数据库，其中有一个名为Registrations的集合，该字段的名称与这些表单字段的名称相同。

我花了整整一天时间来学习那些似乎是在Formik之前做出反应的教程。显示我今天尝试过和失败的所有事情没有多大意义-显然不是在考虑Formik的情况下编写它们。我找不到写onSubmit的方法，以便Formik可以将数据提供给Firebase。

有人找到了当前教程或知道如何做吗？

Answer 1

我在这个开源React项目中使用了Formik和Firebase。也许这就是您要寻找的：）

Expertizo React Native Kit