我试图跟踪表单提交以显示循环进度，直到表单提交为止。
根据formik文档，我可以使用isSubmitting变量来做到这一点，但出现错误“ Uncaught ReferenceError：isSubmitting没有定义”
这是在以laravel作为后端的reactjs中编写的
import React,{
useState,useContext,useEffect,useCallback,useMemo
} from "react";
import CircularProgress from "@material-ui/core/CircularProgress";
import axios from "axios";
import {
makeStyles,InputLabel,MenuItem,FormHelperText,FormControl,Avatar,Select,Typography,Divider,TextField
} from "@material-ui/core";
import SaveIcon from "@material-ui/icons/Save";
import Button from "@material-ui/core/Button";
import { Formik,Field,Form,ErrorMessage } from "formik";
import * as Yup from "yup";
const useStyles = makeStyles(theme => ({
formControl: {
marginTop: 16,minWidth: "100%"
},selectEmpty: {},button: {
width: 200
},bigAvatar: {
margin: 10,width: 120,height: 120
}
}));
let loading=false;
function storeUserProfile(values) {
loading=true;
let res = axios
.post("http://localhost:8000/userprofile",values)
.then(response => {
console.log(response);
})
.catch(excepion => {
console.log(exception);
})
.finally(function () {
loading=false;
console.log('loadingajax:'+loading)
});
}
export default function UserProfile() {
// const [loading,setloading] = useState();
const classes = useStyles();
useEffect(() => {
},[]);
return (
<>
<Formik
initialValues={{
fullname: "asdasd",fathername: "asdasdasdad",email: "asdas@as.com",identitynumber: "123123",usergender: ""
}}
validationSchema={Yup.object({
fullname: Yup.string()
.min(4,"Must be 15 characters or less")
.required("Required"),fathername: Yup.string()
.min(4,"Must be 20 characters or less")
.required("Required"),email: Yup.string()
.email("Invalid email addresss`")
.required("Required"),identitynumber: Yup.string()
.max(15,"Must be 15 characters in length")
.required("Required")
})}
onSubmit={(values,{ setSubmitting }) => {
console.log(isSubmitting)
setTimeout(() => {
//alert(JSON.stringify(values,null,2));
setSubmitting(false);
storeUserProfile(values);
},400);
}}
>
{formik => (
<Form onSubmit={formik.handleSubmit}>
<div classname="container-fluid shadow p-3">
<div classname="UserImage col-12 ">
<Avatar
alt="profile Picture"
src="/images/default_dp.jpg"
classname={classes.bigAvatar}
/>
<Button
variant="text"
color="primary"
size="small"
>
Change
</Button>
</div>
<div classname="row">
<div classname="col-6">
<TextField
fullWidth
requried
error={formik.touched.fullname && formik.errors.fullname && true}
id="fullname"
classname={""}
label="Full Name"
margin="normal"
variant="outlined"
{...formik.getFieldProps("fullname")}
/>
<ErrorMessage name="fullname" />
</div>
<div classname="col-6">
<TextField
fullWidth
requried
id="fathername"
error={
formik.touched.fathername &&
formik.errors.fathername
}
classname={""}
label="Father Name"
margin="normal"
variant="outlined"
{...formik.getFieldProps("fathername")}
/>
<ErrorMessage name="fathername" />
</div>
<div classname="col-6">
<TextField
fullWidth
requried
error={
formik.touched.email &&
formik.errors.email
}
id="email"
classname={""}
label="Email Address"
margin="normal"
variant="outlined"
{...formik.getFieldProps("email")}
/>
<ErrorMessage name="email" />
</div>
<div classname="col-6">
<TextField
fullWidth
required
id="identitynumber"
error={
formik.touched.identitynumber &&
formik.errors.identitynumber ==true
}
classname={""}
label="NIC / Passport Number"
helperText=""
margin="normal"
variant="outlined"
{...formik.getFieldProps(
"identitynumber"
)}
/>
<ErrorMessage name="identitynumber" />
</div>
<div classname="col-6">
<TextField
fullWidth
id="contactnumber"
classname={""}
label="Contact Number"
margin="normal"
variant="outlined"
{...formik.getFieldProps(
"contactnumber"
)}
/>
<ErrorMessage name="contactnumber" />
</div>
<div classname="col-6">
<FormControl
variant="outlined"
classname={classes.formControl}
>
<InputLabel id="user-gender-label">
Gender
</InputLabel>
<Select
labelId="user-gender-label"
id="usergender"
//value={category}
labelWidth={200}
fullWidth
{...formik.getFieldProps(
"usergender"
)}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value="Male">
<em>Male</em>
</MenuItem>
<MenuItem value="Female">
<em>Female</em>
</MenuItem>
<MenuItem value="Other">
<em>Other</em>
</MenuItem>
</Select>
<ErrorMessage name="usergender" />
</FormControl>
</div>
<div classname="col-6">
<TextField
fullWidth
id="Nationality"
classname={""}
label="Nationality"
helperText="e.g Pakistani"
margin="normal"
variant="outlined"
{...formik.getFieldProps("Nationality")}
/>
<ErrorMessage name="nationality" />
</div>
<div classname="col-12">
<TextField
fullWidth
id="address"
classname={""}
label="Address"
margin="normal"
variant="outlined"
{...formik.getFieldProps("address")}
/>
<ErrorMessage name="address" />
</div>
<div classname="col-4">
<TextField
fullWidth
id="city"
classname={""}
label="City"
margin="normal"
variant="outlined"
{...formik.getFieldProps("city")}
/>
<ErrorMessage name="city" />
</div>
<div classname="col-4">
<TextField
fullWidth
id="district"
classname={""}
label="District"
margin="normal"
variant="outlined"
{...formik.getFieldProps("district")}
/>
<ErrorMessage name="district" />
</div>
<div classname="col-4">
<TextField
fullWidth
id="province"
classname={""}
label="Province"
margin="normal"
variant="outlined"
{...formik.getFieldProps("province")}
/>
<ErrorMessage name="province" />
</div>
<div classname="col-12">
<Button
variant="contained"
color="primary"
size="large"
type="submit"
fullWidth
classname={classes.button}
startIcon={<SaveIcon />}
>
Save
</Button>
<React.Fragment>'
{isSubmitting ? (
<CircularProgress
color="inherit"
size={20}
/>
) : null}
</React.Fragment>
</div>
</div>
</div>
</Form>
)}
</Formik>
</>
);
}
isSubmitting应该可以访问