Я пытаюсь понять, как отправить данные формы в firestore из формы formik в приложении реакции.
Я использовал этот учебник , чтобы попытаться узнать, как создайте форму, а затем попытайтесь добавить отправку формы firebase в обработчик отправки.
Форма имеет:
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import firebase from '../../../../firebase';
// import firestore from '../../../../firebase';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
// import axios from 'axios';
import {
Formik, Form, Field, ErrorMessage,
} from 'formik';
import * as Yup from 'yup';
// import { DisplayFormikState } from './formikHelper';
const styles = {
};
function Contact(props) {
const { classes } = props;
const [open, setOpen] = useState(false);
const [isSubmitionCompleted, setSubmitionCompleted] = useState(false);
function handleClose() {
setOpen(false);
}
function handleClickOpen() {
setSubmitionCompleted(false);
setOpen(true);
}
return (
<React.Fragment>
<Link
// component="button"
className="footerlinks"
onClick={handleClickOpen}
>
Contact
</Link>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="form-dialog-title"
>
{!isSubmitionCompleted &&
<React.Fragment>
<DialogTitle id="form-dialog-title">Contact Us</DialogTitle>
<DialogContent>
<DialogContentText>
Thanks for your interest.
</DialogContentText>
<Formik
initialValues={{ email: '', name: '', comment: '' }}
onSubmit={(values, { setSubmitting }) => {
setSubmitting(true);
firebase.firestore.collection("contact").doc.set({
name: "name",
email: "email",
comment: "comment"
})
// axios.post(contactFormEndpoint,
// values,
// {
// headers: {
// 'Access-Control-Allow-Origin': '*',
// 'Content-Type': 'application/json',
// }
// },
.then(() => {
setSubmitionCompleted(true);
});
}}
validationSchema={Yup.object().shape({
email: Yup.string()
.email()
.required('Required'),
name: Yup.string()
.required('Required'),
comment: Yup.string()
.required('Required'),
})}
>
{(props) => {
const {
values,
touched,
errors,
dirty,
isSubmitting,
handleChange,
handleBlur,
handleSubmit,
handleReset,
} = props;
return (
<form onSubmit={handleSubmit}>
<TextField
label="Name"
name="name"
className={classes.textField}
value={values.name}
onChange={handleChange}
onBlur={handleBlur}
helperText={(errors.name && touched.name) && errors.name}
margin="normal"
style={{ width: "100%"}}
/>
<TextField
error={errors.email && touched.email}
label="Email"
name="email"
className={classes.textField}
value={values.email}
onChange={handleChange}
onBlur={handleBlur}
helperText={(errors.email && touched.email) && errors.email}
margin="normal"
style={{ width: "100%"}}
/>
<TextField
label="Let us know how we can help"
name="comment"
className={classes.textField}
multiline
rows={4}
value={values.comment}
onChange={handleChange}
onBlur={handleBlur}
helperText={(errors.comment && touched.comment) && errors.comment}
margin="normal"
style={{ width: "100%"}}
/>
<DialogActions>
<Button
type="button"
className="outline"
onClick={handleReset}
disabled={!dirty || isSubmitting}
>
Reset
</Button>
<Button type="submit" disabled={isSubmitting}>
Submit
</Button>
{/* <DisplayFormikState {...props} /> */}
</DialogActions>
</form>
);
}}
</Formik>
</DialogContent>
</React.Fragment>
}
{isSubmitionCompleted &&
<React.Fragment>
<DialogTitle id="form-dialog-title">Thanks!</DialogTitle>
<DialogContent>
<DialogContentText>
Thanks
</DialogContentText>
<DialogActions>
<Button
type="button"
className="outline"
onClick={handleClose}
>
Back to app
</Button>
{/* <DisplayFormikState {...props} /> */}
</DialogActions>
</DialogContent>
</React.Fragment>}
</Dialog>
</React.Fragment>
);
}
export default withStyles(styles)(Contact);
Файл конфигурации firestore имеет:
Когда я попробуйте это, я получаю предупреждение в консоли, когда нажимаю кнопку «Отправить» (сообщений об ошибках нет, и форма просто зависает с данными, которые я ввел в форму.
instrument.ts: 129 Предупреждение: необработанный ошибка была обнаружена в submitForm () TypeError: firebase__WEBPACK_IMPORTED_MODULE_2 _. default.firestore.collection не является функцией
Обратите внимание, я высушил оба .do c .set и .do c .add в методе firestore - ни один из них не работает.