0

这是我的第一个堆栈溢出问题。我正在尝试构建一个登录页面（使用 node express mongodb mongoose 制作一个完整的堆栈应用程序）并且前端是 REACT。我遇到了一个问题，在我单击输入字段并单击退出之前，输入字段 css 不会注册。我正在使用 Formik 来开发我的表单。我基本上有两个问题：如何解决此问题以及如何对在 localhost:3003 上运行的后端服务器进行 API 调用。这是代码：

import React from "react";
import "../App.css";
import { Formik } from "formik";
import * as EmailValidator from "email-validator";
import * as Yup from "yup";
const ValidatedLoginForm = () => (
  <Formik
    initialValues={{ email: "", password: "" }}
    onSubmit={(values, { setSubmitting }) => {
      setTimeout(() => {
        console.log("Logging in", values);
        setSubmitting(false);
      }, 500);
    }}
    validationSchema={Yup.object().shape({
      email: Yup.string()
        .email()
        .required("Required"),
      password: Yup.string()
        .required("No password provided.")
        .min(8, "Password is too short - should be 8 chars minimum.")
        .matches(/(?=.*[0-9])/, "Password must contain a number.")
    })}
  >
    {props => {
      const {
        values,
        touched,
        errors,
        isSubmitting,
        handleChange,
        handleBlur,
        handleSubmit
      } = props;
      return (
        <div className="FormCenter">
          <form onSubmit={handleSubmit} className="FormFields">
            <div className="FormField">
              <label htmlFor="email" className="FormField__Label">
                Email
              </label>
              <input
                name="email"
                type="text"
                placeholder="Enter your email"
                value={values.email}
                onBlur={handleBlur}
                onChange={handleChange}
                className={
                  errors.email && touched.email && "error" && "FormField__Input"
                }
              />
              {errors.email && touched.email && (
                <div className="input-feedback">{errors.email}</div>
              )}
            </div>
            <div className="FormField">
              <label htmlFor="email" className="FormField__Label">
                Password
              </label>
              <input
                name="password"
                type="password"
                placeholder="Enter your password"
                value={values.password}
                onChange={handleChange}
                onBlur={handleBlur}
                className={
                  errors.password &&
                  touched.password &&
                  "error" &&
                  "FormField__Input"
                }
              />
              {errors.password && touched.password && (
                <div className="input-feedback">{errors.password}</div>
              )}
            </div>
            <div className="FormField">
              <button
                type="submit"
                className="FormField__Button mr-20"
                onChange
              >
                Login
              </button>
            </div>
          </form>
        </div>
      );
    }}
  </Formik>
);

export default ValidatedLoginForm;

4

1 回答 1

0

这对我来说似乎是一种正常的行为。表单中的验证将在以下时间触发，

  1. 当您提交表格时
  2. 当场被触及。因为这一点，当您在字段之间切换而不输入值时，您会看到显示的错误消息。

如果您将访问所有表单值，您应该从 onSubmit 触发 api 调用。我建议你使用 fetch api 。https://developer.mozilla.org/en/docs/Web/API/Fetch_API

只需将您的 onSubmit 作为异步方法并在其中触发您的 api 调用。

于 2019-11-25T11:22:57.713 回答