在Reactjs Formik库中未定义isSubmitting吗?

时间:2019-11-12 15:48:59

标签: reactjs forms formik

我试图跟踪表单提交以显示循环进度,直到表单提交为止。

根据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应该可以访问

1 个答案:

答案 0 :(得分:0)

FormikBag是onSubmit函数的参数传递 注意:错误,接触,状态和所有事件处理程序均不包含在FormikBag中。 isSubmitting是一个formik道具,因此您必须致电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>
    </>
);

}