Как отключить форму автоматического сброса при отправке в formik? - PullRequest
Новая
       2

Как отключить форму автоматического сброса при отправке в formik?

0 голосов
/ 16 марта 2020

У меня есть форма, которой я управляю с помощью formik. Когда я заполняю все поля и нажимаю кнопку «Отправить», вызывается функция onSubmit, и в моей форме эти значения сбрасываются.

Иногда мой данные неверны (например, дубликат электронной почты), и мне нужно сохранить эти данные.

Как я могу это сделать?

Это мой код: 

    const schema = Yup.object().shape({
        login: Yup.string()
            .email('Email não possui formato válido')
            .required('Informe o email!'),
        password: Yup.string().required('Informe a senha!'),
    })

    const formik = useFormik({
        initialValues: {
          login: '', password: '', inactive: false
        },

        validationSchema: schema,
        onSubmit: values => {
            registerUser(values)
        }
    })

return (
    <form onSubmit={formik.handleSubmit} className={classes.form} noValidate>
        <Grid container spacing={3}>

            <Grid item xs={12}>
                <Typography className={classes.observation} component="h6">* Necessário preenchimento do cadastro geral para liberar permissão de telas</Typography>
            </Grid>

            <Grid item xs={5}>
                <TextField
                    value={formik.values.login}
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    helperText={formik.touched.login ? formik.errors.login : ""}
                    error={formik.touched.login && Boolean(formik.errors.login)}
                    variant="outlined"
                    margin="normal"
                    required
                    fullWidth
                    id="email"
                    label="E-mail"
                    name="login"
                    autoComplete="email"
                />
            </Grid>

            <Grid item xs={5}>
                <TextField
                    value={formik.values.password}
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    helperText={formik.touched.password ? formik.errors.password : ""}
                    error={formik.touched.password && Boolean(formik.errors.password)}
                    variant="outlined"
                    margin="normal"
                    required
                    fullWidth
                    type="password"
                    id="password"
                    label="Senha"
                    name="password"
                />
            </Grid>

            <Grid item xs={2}>
                <FormControlLabel
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    value={formik.values.inactive}
                    control={<Switch color="primary" />}
                    label="Inativo"
                    labelPlacement="top"
                />
            </Grid>

            <Grid item xs={3}>
                <Button fullWidth 
                    variant="contained" 
                    color="primary"
                    type="submit"
                >
                    Cadastrar
                </Button>
            </Grid>

        </Grid>
    </form>
);

1 Ответ

0 голосов
/ 16 марта 2020

Вам необходимо обновить следующую строку: 

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