为什么我的数据不能在表单提交的控制台中显示？答案

【问题标题】：Why can't my data show in the console on form submission?为什么我的数据不能在表单提交的控制台中显示？
【发布时间】：2021-06-25 12:54:38
【问题描述】：

我是 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 文件

【问题讨论】：

这可能比潜在的回答者更愿意筛选的代码多一些。如果您能够提供仍能证明问题的minimal reproducible example，您可能会发现您的问题得到了更多的读者，并且进一步得到了更多的回应。

标签： javascript reactjs forms react-native ecmascript-6

【解决方案1】：

这是因为您没有阻止表单的默认行为，这是一种浏览器方法。所以页面将被加载/刷新到目标target。要修复，您需要调用此方法：event.preventDefault() 看到这个答案也可能是相关的：React - Preventing Form Submission 还有这个：Disable form auto submit on button click

【讨论】：