為什么我的數據不能在表單提交的控制台中顯示？

Question

我是 React 的新手，非常享受我的進步。 我在這種情況下的問題是，我在此注冊表單中使用了與登錄表單中相同的標准，但由於某種原因我似乎無法理解，注冊表單沒有console.log()數據，因為登錄表單運行良好。 這是我的注冊表單代碼：

import React, { useState } from "react";
import PhoneInput from "react-phone-number-input";
import { NavLink } from "react-router-dom";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import { useForm } from "react-hook-form";
import signupInputs from "../static/SignupInputs";

const schema = yup.object().shape({
  user_name: yup.string().required("Username is required!"),
  email: yup.string().required("Please enter email!").email(),
  password: yup.string().required("Password is require").min(5),
  c_password: yup.string().required("This field must match password above"),
  tel: yup.string().required(),
  mbn: yup.string().required("Enter your mobile money network!"),
  account_name: yup.string().required("Enter your MBN Account Name!"),
});

function SignupForm(props) {
  const { register, handleSubmit, errors } = useForm({
    resolver: yupResolver(schema),
  });

  const [value, setValue] = useState();
  const onSubmit = (data) => console.log(data);

  return (
    <div id="signupForm">
      <h1>Signup Form</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        {signupInputs.inputs.map((input, key) => {
          return (
            <div key={key}>
              <p>
                <input
                  type={input.type}
                  name={input.name}
                  placeholder={input.placeholder}
                  id={input.id}
                  ref={register}
                />
              </p>
              <p className="errorMessages">{errors[input.name]?.message}</p>
            </div>
          );
        })}
        <PhoneInput
          placeholder="Enter mobile phone number"
          value={value}
          onChange={setValue}
        />
        <button type="submit">Signup</button>
      </form>

      <h2>
        Already have an account? <br />
        <NavLink
          to="/login"
          spy
          smooth
          offset={-70}
          duration={500}
          onClick={props.displayLoginHandler}
          className="App-link Login-link"
        >
          Login
        </NavLink>
      </h2>
    </div>
  );
}

export default SignupForm;

然后，這里是登錄表單的代碼：

import React from "react";
import { NavLink } from "react-router-dom";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import loginInputs from "../static/LoginInputs";

const schema = yup.object().shape({
  user_name: yup.string().required("Username is required!"),
  password: yup.string().required("Password is require"),
});

function Login(props) {
  const { register, handleSubmit, errors } = useForm({
    resolver: yupResolver(schema),
  });
  const onSubmit = (data) => console.log(data);
  return (
    <div id="loginForm">
      <h1>Login Form</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        {loginInputs.inputs.map((input, key) => {
          return (
            <div key={key}>
              <p>
                <input
                  type={input.type}
                  name={input.name}
                  placeholder={input.placeholder}
                  id={input.id}
                  ref={register}
                />
              </p>
              <p className="errorMessages">{errors[input.name]?.message}</p>
            </div>
          );
        })}
        <button type="submit">Login</button>
      </form>
      <h2>
        Not a member yet? <br />
        <NavLink
          to="/"
          onClick={props.displaySignupHandler}
          className="App-link Login-link"
        >
          {" "}
          Signup!
        </NavLink>
      </h2>
    </div>
  );
}

export default Login;

我有兩個單獨的文件來組織輸入字段； SignupInputs 和 LoginInputs 分別為：

注冊輸入

const signupInputs = {
  inputs: [
    {
      type: "text",
      name: "user_name",
      placeholder: "Enter your Username",
      id: "user_name",
    },

    {
      type: "email",
      name: "email",
      placeholder: "emailName@domain.com",
      id: "email",
    },

    {
      type: "password",
      name: "password",
      placeholder: "Enter your unique password",
      id: "password",
    },

    {
      type: "password",
      name: "c_password",
      placeholder: "Confirm password",
      id: "c_password",
    },

    {
      type: "tel",
      name: "phone",
      placeholder: "Mobile Money Number",
      id: "phone",
    },

    {
      type: "text",
      name: "mbn",
      placeholder: "Mobile Banking Network, e.g. Airtel",
      id: "mbn",
    },

    {
      type: "text",
      name: "account_name",
      placeholder: "Account Holder",
      id: "account_name",
    },
  ],
};

export default signupInputs;

和登錄輸入

const loginInputs = {
  inputs: [
    {
      type: "text",
      name: "user_name",
      placeholder: "Enter your Username or Email",
      id: "user_name_L",
    },
    // {
    //   type: "email",
    //   name: "email",
    //   placeholder: "emailName@domain.com",
    //   id: "email_L",
    // },
    {
      type: "password",
      name: "password",
      placeholder: "Enter your unique password",
      id: "password_L",
    },
  ],
};

export default loginInputs;

注意：所有這些都是.jsx 文件

Answer 1

這是因為您沒有阻止表單的默認行為，這是一種瀏覽器方法。因此頁面將被加載/刷新到目標target 。 要解決此問題，您需要調用此方法： event.preventDefault()看到這個答案也可能是相關的： React - Preventing Form Submission另外這個： Disable form auto submit on button click