Question

我正在为我的项目制作一个登录表单，但是当我尝试使用formik和Yup进行验证时，onsubmit在任何情况下均不起作用。我尝试删除任何验证，也尝试遵循所有验证规则，但似乎仍然无济于事。

这是我的代码：

import React from 'react';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';

const LoginSchema = Yup.object().shape({
    email: Yup.string()
        .email('Invalid email')
        .required('Required'),
    password: Yup.string()
        .min(6, 'Password has to be atleast 6 characters long')
        .required('Required')
});


const SingIn = ({ createAccount }) => {
    return (
        <div className="">

            <div className="text-2xl m-4 font-medium text-center lg:text-4xl">Sign in</div>

            <Formik
                initialValues={{
                    email: '',
                    password: '',
                }}
                validationSchema={LoginSchema}
                // validator={() => ({})}
                onSubmit={values => {
                    // same shape as initial values
                    alert(values);
                    console.log('here')
                }}
            >
                {({ errors, touched }) => (
                    <Form>
                        <div className={`w-full flex flex-col my-4`}>
                            <label className="uppercase tracking-wide text-gray-600 text-xs font-semibold mb-2 lg:text-2xl">Email</label>
                            <Field required name="email" type="email" className="appearance-none block w-full bg-gray-200 text-gray-800 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500 lg:text-3xl" />
                            {errors.email && touched.email ? <div>{errors.email}</div> : null}
                        </div>

                        <div className={`w-full flex flex-col my-4`}>
                            <label className="uppercase tracking-wide text-gray-600 text-xs font-semibold mb-2 lg:text-2xl">Password</label>
                            <Field required name="password" type="password" className="appearance-none block w-full bg-gray-200 text-gray-800 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500 lg:text-3xl" />
                            {errors.password && touched.password ? <div>{errors.password}</div> : null}
                        </div>

                        <div className="w-full flex justify-between items-center mb-4 mt-10">
                            <button className="text-blue-600 font-semibold" onClick={createAccount}>Create Account</button>
                            <button type="submit" className="px-5 py-2 bg-blue-600 shadow-md hover:shadow-2xl rounded-lg hover:bg-blue-800 inline-flex justify-center items-center">
                                <span className="text-white font-semibold">Login</span>
                            </button>
                        </div>
                    </Form>
                )}

            </Formik>
        </div>
    )
}

export default SingIn;

我尝试了一堆东西，似乎没有东西起作用……是的！

编辑（已解决）：实际上，代码没有问题，问题在于此登录窗口是模态的，并且具有背景，我在其上提供了onClick函数来关闭模态，我围绕该模态进行了研究。谢谢：）

单击提交按钮时未触发表单Onsubmit（）（reactJs，Formik，Yup）

0 个答案: