Reactjs Formik库中未定义IssubMatting？
我试图跟踪表单提交，以显示循环进度，直到表单提交为止 根据formik文档，我可以使用ISSUBMITING变量来实现这一点，但我得到的错误是“未捕获引用错误：ISSUBMITING未定义” 这是在reactjs中编写的，以laravel为后端Reactjs Formik库中未定义IssubMatting？,reactjs,forms,formik,Reactjs,Forms,Formik,我试图跟踪表单提交，以显示循环进度，直到表单提交为止 根据formik文档，我可以使用ISSUBMITING变量来实现这一点，但我得到的错误是“未捕获引用错误：ISSUBMITING未定义” 这是在reactjs中编写的，以laravel为后端 import React, { useState, useContext, useEffect, useCallback, useMemo } from "react"; import CircularProgre
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>
</>
);
}
import-React{
useState，
使用上下文，
使用效果，
使用回调，
使用备忘录
}从“反应”；
从“@material ui/core/CircularProgress”导入CircularProgress；
从“axios”导入axios；
进口{
制作风格，
输入标签，
MenuItem，
FormHelperText，
FormControl，
阿凡达
选择，
排版，
分隔器，
文本字段
}来自“@材料界面/核心”；
从“@material ui/icons/Save”导入SaveIcon；
从“@物料界面/核心/按钮”导入按钮；
从“Formik”导入{Formik，Field，Form，ErrorMessage}；
从“Yup”导入*作为Yup；
const useStyles=makeStyles（主题=>({
表单控制：{
玛金托普：16，
最小宽度：“100%。”
},
选择Empty:{}，
按钮：{
宽度：200
},
bigAvatar：{
差额：10，
宽度：120，
身高：120
}
}));
设加载=假；
函数storeUserProfile（值）{
加载=真；
设res=axios
.post（“http://localhost:8000/userprofile“，值）
。然后（响应=>{
控制台日志（响应）；
})
.catch（例外=>{
console.log（异常）；
})
.最后（函数（）{
加载=假；
log（'loadingajax:'+加载）
});
}
导出默认函数UserProfile（）{
//const[loading，setloading]=useState（）；
const classes=useStyles（）；
useffect（（）=>{
}, []);
返回(
{
console.log（isSubmitting）
设置超时（（）=>{
//警报（JSON.stringify（值，null，2））；
设置提交（假）；
storeUserProfile（值）；
}, 400);
}}
>
{formik=>(
改变
性别
没有一个
男性
女性
其他
拯救
'
{提交(
)：null}
)}
);
}
ISSUBMITING应该是可访问的FormikBag是Submit函数上作为参数传递的 注意：
FormikBagisSubmittingformik.isSubmittingexport default function UserProfile() {
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) CAN`T ACCESS IN FORMIKBAG
setTimeout(() => {
//alert(JSON.stringify(values, null, 2));
setSubmitting(false);
storeUserProfile(values);
}, 400);
}}
>
{formik => (
<Form onSubmit={formik.handleSubmit}>
{console.log(formik.isSubmitting)}
<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>'
{formik.isSubmitting ? ( // isSubmitting IS A FORMIK PROPS
<CircularProgress
color="inherit"
size={20}
/>
) : null}
</React.Fragment>
</div>
</div>
</div>
</Form>
)}
</Formik>
</>
);
导出默认函数UserProfile（）{
const classes=useStyles（）；
useffect（（）=>{
}, []);
返回(
{
//console.log（isSubmitting）无法在FORMIKBAG中访问
设置超时（（）=>{
//警报（JSON.stringify（值，null，2））；