我正在尝试弄清楚如何从 react 应用程序中的 formik 表单将表单数据提交到 firestore。
我使用本教程尝试学习如何制作表单，然后尝试将 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() 类型错误中捕获了未处理的错误： firebase__WEBPACK_IMPORTED_MODULE_2 _.default.firestore.collection 不是函数
请注意，我已经在 firestore 方法中干燥了 .doc.set 和 .doc.add - 两者都不起作用。