如何在formik中禁用提交时自动重置表单？

Question

我有一个由 formik 控制的表单，当我填写所有字段并按下按钮提交时，该函数onSubmit被调用，并且我的表单已重置该值。

\n\n

有时我的数据不正确（例如重复的电子邮件），我需要保留这些数据。

\n\n

我怎样才能做到这一点？

\n\n

这是我的代码：

\n\n

    const schema = Yup.object().shape({\n        login: Yup.string()\n            .email(\'Email n\xc3\xa3o possui formato v\xc3\xa1lido\')\n            .required(\'Informe o email!\'),\n        password: Yup.string().required(\'Informe a senha!\'),\n    })\n\n    const formik = useFormik({\n        initialValues: {\n          login: \'\', password: \'\', inactive: false\n        },\n\n        validationSchema: schema,\n        onSubmit: values => {\n            registerUser(values)\n        }\n    })\n\nreturn (\n    <form onSubmit={formik.handleSubmit} className={classes.form} noValidate>\n        <Grid container spacing={3}>\n\n            <Grid item xs={12}>\n                <Typography className={classes.observation} component="h6">* Necess\xc3\xa1rio preenchimento do cadastro geral para liberar permiss\xc3\xa3o de telas</Typography>\n            </Grid>\n\n            <Grid item xs={5}>\n                <TextField\n                    value={formik.values.login}\n                    onChange={formik.handleChange}\n                    onBlur={formik.handleBlur}\n                    helperText={formik.touched.login ? formik.errors.login : ""}\n                    error={formik.touched.login && Boolean(formik.errors.login)}\n                    variant="outlined"\n                    margin="normal"\n                    required\n                    fullWidth\n                    id="email"\n                    label="E-mail"\n                    name="login"\n                    autoComplete="email"\n                />\n            </Grid>\n\n            <Grid item xs={5}>\n                <TextField\n                    value={formik.values.password}\n                    onChange={formik.handleChange}\n                    onBlur={formik.handleBlur}\n                    helperText={formik.touched.password ? formik.errors.password : ""}\n                    error={formik.touched.password && Boolean(formik.errors.password)}\n                    variant="outlined"\n                    margin="normal"\n                    required\n                    fullWidth\n                    type="password"\n                    id="password"\n                    label="Senha"\n                    name="password"\n                />\n            </Grid>\n\n            <Grid item xs={2}>\n                <FormControlLabel\n                    onChange={formik.handleChange}\n                    onBlur={formik.handleBlur}\n                    value={formik.values.inactive}\n                    control={<Switch color="primary" />}\n                    label="Inativo"\n                    labelPlacement="top"\n                />\n            </Grid>\n\n            <Grid item xs={3}>\n                <Button fullWidth \n                    variant="contained" \n                    color="primary"\n                    type="submit"\n                >\n                    Cadastrar\n                </Button>\n            </Grid>\n\n        </Grid>\n    </form>\n);\n

\n

Answer 1

您需要更新以下行：

    <form onSubmit={(e) => { e.preventDefault(); formik.handleSubmit(e)}} className={classes.form} noValidate>