Не сабмититься форма (formik)?

Question

[vovashaplin]

Переменная isSubmitting всегда false, не выполняется функция onSubmit вообще
Вот код

import React from 'react'
import './Reg.min.css'
import { Form, Input, Button } from 'antd'
import { UserOutlined, LockOutlined, MailOutlined } from '@ant-design/icons'
import { Link } from 'react-router-dom'
import { useFormik } from 'formik'
import * as Yup from 'yup'

const validationSchema = Yup.object().shape({
    email: Yup.string()
        .email('Некорректный E-mail')
        .required('Введите E-mail'),
    username: Yup.string()
        .matches(
            '^[a-zA-Z][a-zA-Z0-9-_.]{1,20}$',
            'Только строчные и прописные, первый символ буква'
        )
        .required('Введите логин'),
    password: Yup.string()
        .matches(
            '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})',
            'Слишком легкий пароль'
        )
        .required('Введите пароль'),
    confirmPassword: Yup.string()
        .required('Введите пароль')
        .oneOf([Yup.ref("password"), null], 'Пароли должны совпадать')
})

const errorMessege = (touched, messege) => {
    if (!touched) {
        return
    }
    if (messege) {
        return messege
    }
}

export const Reg = () => {

    const formik = useFormik({
        initialValues: {
            email: '',
            username: '',
            password: '',
            passwordNext: ''
        },
        validationSchema: validationSchema,
        onSubmit: (values, { setSubmitting, resetForm }) => {
            setSubmitting(true)
            setTimeout(() => {
                alert(JSON.stringify(values, null, 2));
                resetForm()
                setSubmitting(false)
            }, 500)
        }
    });

    const { handleSubmit, handleChange, handleBlur, isSubmitting, errors, touched, values } = formik

    return (
        <div className="Reg">
            <div>
                <div className="Reg__top">
                    <h3>Зарегистрироваться</h3>
                    <p>Пожалуйста заполните данные</p>
                </div>
                <Form onSubmit={handleSubmit}>
                    <Form.Item
                        name="email"
                        hasFeedback
                        help={errorMessege(touched.email, errors.email)}
                        validateStatus={!touched.email ? null : errors.email ? "error" : "success"}
                    >
                        <Input
                            id="reg__email"
                            placeholder="E-mail"
                            prefix={<MailOutlined />}
                            value={values.username}
                            onChange={handleChange}
                            onBlur={handleBlur}
                        />
                    </Form.Item>
                    <Form.Item
                        name="username"
                        hasFeedback
                        help={errorMessege(touched.username, errors.username)}
                        validateStatus={!touched.username ? null : errors.username ? "error" : "success"}
                    >
                        <Input
                            id="reg__username"
                            placeholder="Логин"
                            prefix={<UserOutlined />}
                            value={values.username}
                            onChange={handleChange}
                            onBlur={handleBlur}
                        />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        hasFeedback
                        help={errorMessege(touched.password, errors.password)}
                        validateStatus={!touched.password ? null : errors.password ? "error" : "success"}
                    >
                        <Input.Password
                            id="reg__password"
                            placeholder="Пароль"
                            prefix={<LockOutlined />}
                            value={values.password}
                            onChange={handleChange}
                            onBlur={handleBlur}
                        />
                    </Form.Item>
                    <Form.Item
                        name="confirmPassword"
                        hasFeedback
                        help={errorMessege(touched.confirmPassword, errors.confirmPassword)}
                        validateStatus={!touched.confirmPassword ? null : errors.confirmPassword ? "error" : "success"}
                    >
                        <Input.Password
                            id="reg__confirmPassword"
                            placeholder="Повторите пароль"
                            prefix={<LockOutlined />}
                            value={values.username}
                            onChange={handleChange}
                            onBlur={handleBlur}
                        />
                    </Form.Item>ф
                    <Form.Item >
                        <Button type="primary" htmlType="submit" disabled={isSubmitting}>
                            Зарегистрироваться
                        </Button>
                    </Form.Item>
                </Form>
                <Link to='/log'><p>Войти</p></Link>
            </div>
        </div>
    )
}

Comments

[andrey balabolkin]

arhakov blog?)

Answer 1

[Akayo21]

Прочтите этот ответ, скорее всего вам это поможет
https://stackoverflow.com/questions/55237482/formi...