我是 React 的新手。 js.，所以我试图使用下面的表单，但是当我按下注册按钮时，应该提交表单并显示<SignUpFormSuccess />。没有显示错误。每个字段都正确填写。有谁知道为什么按钮不提交（不起作用）？如果我想在没有显示错误的情况下显示另一个页面，我该怎么做？非常感谢您的帮助！
@antoineso 提供的解决方案有效，但不是应有的方式。这里的问题是我有 2 个注册变体。第一个是用户，第二个是企业，因为你可以看到每个变量都不同，所以当我填写用户的注册时，公司名称有 1 个字段留空。他的解决方案只是因为他为companyName添加了一个默认值，否则它仍然是空的并且无法提交表单。
我的 validateInfo.js 文件
export default function validateInfo(values) {
let errors = {};
//email
if (!values.email) {
errors.email = 'Email required';
} else if (!/\S+@\S+\.\S+/.test(values.email)) {
errors.email = 'Email address is invalid';
}
if (!values.companyName.trim()) {
errors.companyName = "Company Name required"
}else if (!/^[A-Za-z]+/.test(values.companyName.trim())) {
errors.companyName = 'Enter a valid company name';
}
//username
if (!values.username.trim()) {
errors.username = "Username required"
}else if (!/^[A-Za-z]+/.test(values.username.trim())) {
errors.username = 'Enter a valid username';
}
//fullname
if (!values.fullname.trim()) {
errors.fullname = 'Full Name required';
}
else if (!/^[A-Za-z]+/.test(values.fullname.trim())) {
errors.fullname = 'Enter a valid Full Name';
}
//password
if (!values.password) {
errors.password = 'Password is required';
} else if (values.password.length < 6) {
errors.password = 'Password needs to be 6 characters or more';
}
return errors;
}
我的 useForm.js 文件是这样的：
import { useState, useEffect } from 'react';
const useForm = (callback, validate) => {
const [values, setValues] = useState({
username: '',
email: '',
fullname:'',
password: '',
businessEmail: '',
companyName:''
});
const [errors, setErrors] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);
const handleChange = e => {
const { name, value } = e.target;
setValues({
...values,
[name]: value
});
};
const handleSubmit = e => {
e.preventDefault();
setErrors(validate(values));
setIsSubmitting(true);
};
useEffect(
() => {
if (Object.keys(errors).length === 0 && isSubmitting) {
callback();
}
},
[callback, errors, isSubmitting]
);
return { handleChange, handleSubmit, values, errors };
};
export default useForm;
SignUpUser.js 看起来像这样：
import React from 'react';
import useForm from '../useForm';
import validate from '../validateInfo';
import './SignUpForm.css'
const SignUpUser = ({submitForm}) => {
const { handleChange, values, handleSubmit, errors } = useForm(submitForm,validate);
return (
<div className="form-content-right">
<form className="form" onSubmit={handleSubmit}>
<h1>Join our community by setting up your account</h1>
<div className="form-inputs">
<label className='form-label'>
</label>
<input
type="email"
name="email"
className='form-input'
placeholder="Email"
value={values.email}
onChange={handleChange}
/>
{errors.email && <p>{errors.email}</p>}
</div>
<div className="form-inputs">
<label htmlFor="fullname" className='form-label'> </label>
<input
type="text"
name="fullname"
className='form-input'
placeholder="Full Name"
value={values.fullname}
onChange={handleChange}
/>
{errors.fullname && <p>{errors.fullname}</p>}
</div>
<div className="form-inputs">
<label htmlFor="username" className='form-label'></label>
<input
type="text"
name="username"
className='form-input'
placeholder="Username"
value={values.username}
onChange={handleChange}
/>
{errors.username && <p>{errors.username}</p>}
</div>
<div className="form-inputs">
<label htmlFor="password" className='form-label'> </label>
<input
type="text"
name="password"
className='form-input'
placeholder="Password"
value={values.password}
onChange={handleChange}
/>
{errors.password && <p>{errors.password}</p>}
</div>
<button className="form-input-btn" type='submit'>Sign Up</button>
<span className="form-input-login"> Already have an account? <a href="/log-in">Login</a> </span>
</form>
</div>
);
};
export default SignUpUser;
我的 SignUpFormUser.js 文件
import React, { useState } from 'react';
import SignUpUser from './SignUpUser';
import SignUpFormSuccess from './SignUpFormSuccess';
import { Link } from 'react-router-dom';
const SignUpForm = () => {
const [isSubmitted, setIsSubmitted] = useState(false);
function submitForm() {
setIsSubmitted(true);
}
return (
<>
<div className="grid-container top">
<div className="grid-item back">
<Link to='/sign-up'>
<img src="/images/backOutline.svg" alt="" />
</Link>
</div>
<div className="grid-item logo">
<Link to='/' className='logo'>
<img src="/images/yokifyLogoBlk.svg" alt="" />
</Link>
</div>
<div className="grid-item cancel">
<Link to='/'>
<img src="/images/cancelOutline.svg" alt="" />
</Link>
</div>
</div>
<div className='form-container'>
<div className="form-content-left">
<img src="/images/handsUp.svg" alt="people" className="form-img"/>
</div>
{!isSubmitted ? (
<SignUpUser submitForm={submitForm} />
) : (
<SignUpFormSuccess />
)}
</div>
</>
);
};
export default SignUpForm;
注册业务
import React from 'react';
import useForm from '../useForm';
import validate from '../validateInfo';
import './SignUpForm.css'
const SignUpBusiness = (submitForm) => {
const { handleChange, values, handleSubmit, errors } = useForm(submitForm, validate);
return (
<div className="form-content-right">
<form className="form" onSubmit={handleSubmit}>
<h1>Set up your company's profile</h1>
<div className="form-inputs">
<label className='form-label'> </label>
<input
type="text"
name="companyName"
className='form-input'
placeholder="Company's Name"
value={values.companyName}
onChange={handleChange}
/>
{errors.companyName && <p>{errors.companyName}</p>}
</div>
<div className="form-inputs">
<input
type="text"
name="fullname"
className='form-input'
placeholder="Admin's Full Name"
value={values.fullname}
onChange={handleChange}
/>
{errors.fullname && <p>{errors.fullname}</p>}
</div>
<div className="form-inputs">
<input
type="text"
name="username"
className='form-input'
placeholder="Username"
value={values.username}
onChange={handleChange}
/>
{errors.username && <p>{errors.username}</p>}
</div>
<div className="form-inputs">
{/* <label htmlFor="password" className='form-label'> </label> */}
<input
type="text"
name="password"
className='form-input'
placeholder="Password"
value={values.password}
onChange={handleChange}
/>
{errors.password && <p>{errors.password}</p>}
</div>
<button className="form-input-btn" type="submit">Sign Up</button>
<span className="form-input-login"> Already have an account? <a href="/login">Login</a> </span>
</form>
</div>
);
};
export default SignUpBusiness;