[英]Why can't my data show in the console on form submission?
I am a newbie to React, enjoying my progress very much.我是 React 的新手,非常享受我的进步。 My problem at this instance is that, I have used the same criteria in this Signup form as I have in the Login form, but for some reason I can't seem to comprehend, the Signup form does not
console.log()
the data, where as the Login form works well.我在这种情况下的问题是,我在此注册表单中使用了与登录表单中相同的标准,但由于某种原因我似乎无法理解,注册表单没有
console.log()
数据,因为登录表单运行良好。 Here is my code for Signup form:这是我的注册表单代码:
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;
Then, here is code for the Login form:然后,这里是登录表单的代码:
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;
And I have two separate files which organize the input fields;我有两个单独的文件来组织输入字段; the SignupInputs and LoginInputs respectively:
SignupInputs 和 LoginInputs 分别为:
THE SIGNUP INPUTS注册输入
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;
AND THE LOGIN INPUTS和登录输入
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;
NB: All these are .jsx files注意:所有这些都是.jsx 文件
It's because you are not preventing the default behavior of the form, which is a browser method.so the page will be loaded/refreshed to the target target
.这是因为您没有阻止表单的默认行为,这是一种浏览器方法。因此页面将被加载/刷新到目标
target
。 To fix you need to call this method: event.preventDefault()
See this answer might be relevant as well: React - Preventing Form Submission Also this: Disable form auto submit on button click要解决此问题,您需要调用此方法:
event.preventDefault()
看到这个答案也可能是相关的: React - Preventing Form Submission另外这个: Disable form auto submit on button click
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.