解決React JSX中的表單驗證問題的方法是什麼？
我正在嘗試在 React 中做一個驗證表單，但自從我添加了保存用戶註冊資料以來，我遇到了很多問題。
import React, { useState } from "react";
import "./registerstyle.css";
import EyeIcon from "./EyeIcon.png";
import EyeIconHide from "./EyeIconHide.png";
import { signup } from "../../api/client";
function RegisterPage() {
const [showPassword, setShowPassword] = useState(false);
const [passwordVisible, setPasswordVisible] = useState(false);
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
const [confirmPasswordVisible, setConfirmPasswordVisible] = useState(false);
const [nameEmpty, setNameEmpty] = useState(false);
const [confirmPasswordEmpty, setconfirmPasswordEmpty] = useState(false);
const [emailEmpty, setEmailEmpty] = useState(false);
const [passwordEmpty, setPasswordEmpty] = useState(false);
const [newsletter, setNewsletter] = useState(false); // Aggiunto lo stato per la checkbox
const [name, setName] = useState(null);
const [email, setEmail] = useState(null);
const [password, setPassword] = useState(null);
const [cpass, setCpass] = useState(null);
const user = { name: name, email: email, password: password, cpass: cpass };
const handleShowPassword = () => {
setShowPassword(!showPassword);
setPasswordVisible(!passwordVisible);
};
const handleShowConfirmPassword = () => {
setShowConfirmPassword(!showConfirmPassword);
setConfirmPasswordVisible(!confirmPasswordVisible);
};
const handleFormSubmit = (e) => {
e.preventDefault();
// Verifica se i campi email e password sono vuoti
if (!e.target.email.value) {
setEmailEmpty(true);
console.log("email True");
} else {
setEmailEmpty(false);
console.log("email False");
}
if (!e.target.name.value) {
setNameEmpty(true);
} else {
setNameEmpty(false);
}
if (!e.target.password.value) {
setPasswordEmpty(true);
} else {
setPasswordEmpty(false);
}
if (!e.target.confirmPassword.value) {
setconfirmPasswordEmpty(true);
} else {
setconfirmPasswordEmpty(false);
}
};
const handleNewsletterChange = (e) => {
setNewsletter(e.target.checked);
}; // Funzione per gestire il cambiamento di stato della checkbox
const passwordInputClass = passwordVisible ? "passwordVisible" : "";
const confirmPasswordInputClass = confirmPasswordVisible ? "confirmPasswordVisible" : "";
return (
<div className="backgroundRegister">
<div className="titleRegister" />
<div className="breakRegister" />
<div className="contlogRegister" />
<div className="signIn" />
<form className="formRegister" onSubmit={handleFormSubmit}>
<label>
{/* NAME */}
<input type="text" name="name" placeholder="Name" onChange={(e) => { setName(e.target.value) }} required/>
</label>
{nameEmpty && (
<div>
<div className="alertCircleName" />
<div className="FillThisName" />
<div className="RedRectangleName" />
<div className="nameError" />
</div>
)}
<br />
<label>
{/* EMAIL */}
<input type="email" name="email" placeholder="Email" onChange={(e) => { setEmail(e.target.value) }} required/>
</label>
{emailEmpty && (
<div>
<div className="alertCircleEmailRegister" />
<div className="FillThisEmailRegister" />
<div className="RedRectangleEmailRegister" />
<div className="emailErrorRegister" />
</div>
)}
<br />
<label>
{/* PASSWORD*/}
<input
type={showPassword ? "text" : "password"}
name="password"
placeholder="Password"
className={passwordInputClass}
onChange={(e) => { setPassword(e.target.value) }}
/>
<img
src={passwordVisible ? EyeIconHide : EyeIcon}
alt="eye-icon"
className="eyeIconRegister1"
onClick={() => {
handleShowPassword();
}}
/>
</label>
{passwordEmpty && (
<div>
<div className="alertCirclePasswordRegister" />
<div className="FillThisPasswordRegister" />
<div className="RedRectanglePasswordRegister" />
<div className="passwordErrorRegister" />
</div>
)}
<br />
<label>
{/* CONFIRM PASSWORD */}
<input
type={showConfirmPassword ? "text" : "password"}
name="confirmPassword"
placeholder="Confirm Password"
className={confirmPasswordInputClass}
onChange={(e) => { setCpass(e.target.value) }}
/>
<img
src={confirmPasswordVisible ? EyeIconHide : EyeIcon}
alt="eye-icon"
className="eyeIconRegister2"
onClick={() => {
handleShowConfirmPassword();
}}
/>
</label>
{confirmPasswordEmpty && (
<div>
<div className="alertCircleConfirmPassword" />
<div className="FillThisConfirmPassword" />
<div className="RedRectangleConfirmPassword" />
<div className="confirmPasswordError" />
</div>
)}
<br />
<label> {/* NEWSLETTER */}
<input type="checkbox" name="newsletter" checked={newsletter} onChange={handleNewsletterChange} />
</label>
<span className="newsletter">Send me newsletters, tricks and updates. </span>
<br />
<input type="submit" value="SIGN IN" className="signInButton" onClick={(e) => {
e.preventDefault();
signup(user);
handleFormSubmit(e);
}}/>
</form>
<div className="registerSign">
Already have an account? <a href="" className="colorRegister">Login now</a>
</div>
</div>
);
}
export default RegisterPage;
這是註冊代碼：
import axios from "axios";
// const client = axios.create({
// baseURL: "http://localhost:9000", // o l'endpoint del vostro backend
// headers: {
// "Content-Type": "application/json",
// // "Authorization": "Bearer " + localStorage.getItem("token")
// }
// });
// export default client;
async function signup(user) {
const newUser = JSON.stringify(user);
console.log("sono dentro la funzione");
try {
return await axios.post("http://localhost:3000/signup", newUser);
} catch (err) {
if (err.response) {
return err.response.data;
} else {
console.log("Errore:", err.message);
}
}
};
async function login(user) {
const newUser = JSON.stringify(user);
console.log("sono dentro");
try {
return await axios.post("http://localhost:3000/login", newUser);
//return await axios.post("http://localhost:3000/login",)
} catch (err) {
if (err.response) {
return err.response.data;
} else {
console.log("Errore:", err.message);
}
}
};
async function loginOld(credentials) {
const loginData = JSON.stringify(credentials);
await axios.post("http://localhost:3000/login", loginData);
};
export { signup, login };
我預計會發生什麼，當您單擊按鈕時字段留空時，它們會從我創建的圖像中彈出以圈出留空的字段。有時它會給出以下錯誤：
TypeError: Cannot read properties of undefined (reading 'value')
at handleFormSubmit (http://localhost:3000/main.7b4752724621de0f0bc6.hot-update.js:66:25)
at onClick (http://localhost:3000/main.7b4752724621de0f0bc6.hot-update.js:387:11)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:14655:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:14699:20)
at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:14756:35)
at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/bundle.js:14770:29)
at executeDispatch (http://localhost:3000/static/js/bundle.js:18914:7)
at processDispatchQueueItemsInOrder (http://localhost:3000/static/js/bundle.js:18940:11)
at processDispatchQueue (http://localhost:3000/static/js/bundle.js:18951:9)
at dispatchEventsForPlugins (http://localhost:3000/static/js/bundle.js:18960:7)```
I'm desperate and don't really know where to put my hands.