isSubmitting 没有在 Reactjs Formik 库中定义？
isSubmitting is not defined in Reactjs Formik library?
我正在尝试跟踪表单提交以显示循环进度，直到表单提交为止。
根据 formik 文档，我可以使用 isSubmitting 变量来执行此操作，但出现错误 "Uncaught ReferenceError: isSubmitting is not defined"
这是在以 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 应该可以访问
FormikBag 是 onSubmit 函数的参数传递
注意：FormikBag 中不包含错误、触摸、状态和所有事件处理程序。
isSubmitting 是一个 formik props ，所以你必须调用 formik.isSubmitting
export 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>
</>
);
}
我正在尝试跟踪表单提交以显示循环进度，直到表单提交为止。
根据 formik 文档，我可以使用 isSubmitting 变量来执行此操作，但出现错误 "Uncaught ReferenceError: isSubmitting is not defined"
这是在以 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 应该可以访问
FormikBag 是 onSubmit 函数的参数传递
注意：FormikBag 中不包含错误、触摸、状态和所有事件处理程序。
isSubmitting 是一个 formik props ，所以你必须调用 formik.isSubmitting
export 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>
</>
);
}