为什么提交表单时我的数据无法显示在控制台中？

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: "[e-mail]",
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: "[e-mail]",
//   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-阻止表单提交还有这个：点击按钮禁用表单自动提交