Question

这是我的第一个堆栈溢出问题。我正在尝试建立一个登录页面（使用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;

Answer 1

在我看来，这是正常现象。

时，将触发表单中的验证

提交表单时
触摸该字段时。因此，您在不输入值的情况下在字段之间切换时会看到错误消息。

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

只需将onSubmit设为asyn方法，然后在其中触发api调用即可。

REACT.JS + FORMIK输入字段问题，

1 个答案: