我有一些前端驗證來格式化表單上的一些輸入。目前我的錯誤訊息列印到控制臺。我希望這些錯誤訊息成為組件中標題的 innerHTML。
我已經嘗試過分配innerHTML，document.getElementByID但沒有奏效。我還嘗試在error范圍之外定義變數或將其添加到 h2 標簽之間{error}
我希望有任何建議可以使這些錯誤訊息在前端顯示為文本，而不是像現在這樣列印到控制臺。空白 h2 元素是我試圖將錯誤文本定位到的元素。
import React, {useState} from 'react';
import {useNavigate} from 'react-router-dom';
import axios from 'axios';
import Helmet from 'react-helmet';
import Button from '@mui/material/Button';
export default function Register() {
const navigate = useNavigate();
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const inputs = [
{
placeholder: 'First name',
setState: setFirstName
},
{
placeholder: 'Last name',
setState: setLastName
},
{
placeholder: 'Email',
setState: setEmail
},
{
placeholder: 'Enter a password',
setState: setPassword,
},
{
placeholder: 'Confirm password',
setState: setConfirmPassword,
},
]
//Insert into database api request
const insertRow = () => {
axios.post('/users/insert', {
firstName: firstName,
lastName: lastName,
email: email,
password: password,
})
};
//#region Validation
const atSymbol = '@';
//Checks for numbers in string
function containsNumber(str) {
return /[0-9]/.test(str);
}
//Checks for capital in string
function containsCapital(str) {
return /[A-Z]/.test(str);
}
const submitHandler = (e) => {
e.preventDefault(); //Prevents page refresh
let error = ''
//If no @ symobol in email
if (!email.includes(atSymbol)) {
error = 'Please enter a valid email';
console.log(error);
return;
}
//If password doesn't contain a capital
if (!containsCapital(password)) {
error = 'Password must contain at least one uppercase letter';
console.log(error);
return;
}
//If password doesn't contain a number
if (!containsNumber(password)) {
error = 'Password must contain at least one number';
console.log(error);
return;
}
//If password is less than 8 characters
if (password.length < 8) {
error = 'Password must be at least 8 characters long';
console.log(error);
return;
}
//If passwords don't match
if (confirmPassword !== password) {
error = 'Passwords do not match';
console.log(error);
return;
}
//If all validation passes
insertRow();
navigate('/login');
}
//#endregion
return (
<>
<Helmet>
<title>Title | Register</title>
</Helmet>
<div className="pt-36 sm:pt-44 pb-20 md:pb-48 max-w-[1200px] mx-5 lg:mx-auto space-y-5">
<div className="bg-red-300 max-w-[500px] p-1 mx-auto">
<h2 className="text-lg text-red-900 font-semibold"></h2>
</div>
<h1 className="text-2xl font-semibold text-center">Register</h1>
<form onSubmit={submitHandler} className="flex flex-col space-y-5 max-w-[500px] mx-auto">
{inputs.map((items, index) => (
<input
key={index}
type="text"
className="border-2 border-black p-1"
placeholder={`${items.placeholder} *`}
required
onChange={(e) => {
items.setState(e.target.value);
}}
/>
))}
<Button
type="submit"
sx={{
border: '2px solid #000000',
color: '#000000',
marginLeft: 'auto',
marginRight: 'auto',
':hover': {
bgcolor: '#ffffff',
color: '#000000',
},
}}
>
Submit
</Button>
</form>
</div>
</>
)
}
uj5u.com熱心網友回復：
您不能直接執行{error}，因為error未定義為state組件中的屬性。
你必須宣告它
const [error, setError] = useState('');
并且每當您設定錯誤時，您都必須使用setError
if (!email.includes(atSymbol)) {
setError('Please enter a valid email');
console.log(error);
return;
}
然后在JSX你可以使用
{error.length>0 && <p>{error}</p>}
盡管這error對于所有輸入都是通用的
uj5u.com熱心網友回復：
要跟蹤每個欄位的錯誤，您可以采用這種方法。
以欄位名稱作為物件鍵的所有錯誤的物件。使用新錯誤更新狀態。現在這不會跟蹤每個欄位的多個錯誤，但最終會通過所有錯誤。之前insertRow檢查是否有任何錯誤，如果有任何回傳。
const [errors, setErrors] = useState({ email: "", password: "" });
const inputs = [
{
email: 'email', // key to get value from errors
placeholder: 'Email',
setState: setEmail
},
...
]
const submitHandler = (e) => {
e.preventDefault(); //Prevents page refresh
setErrors({ email: "", password: "" }); // reset the errors on every submit
//If no @ symobol in email
if (!email.includes(atSymbol)) {
setErrors((prevError) => ({
...prevError,
email: "Please enter a valid email",
}));
// no return needed
}
// ... at the end before navigating check if there are errors
if (errors.email || errors.password) return;
//If all validation passes
insertRow();
navigate('/login');
};
name當我們想要顯示錯誤時，額外的道具就會發揮作用。每次輸入后，我們都會檢查該欄位是否存在錯誤，如果有則顯示。
return (
...
{inputs.map((items, index) => (
<>
<input
key={index}
type="text"
className="border-2 border-black p-1"
placeholder={`${items.placeholder} *`}
required
onChange={(e) => {
items.setState(e.target.value);
}}
/>
{ errors[items.name] && <div>{errors[items.name]}</div>}
</>
))}
...
);
uj5u.com熱心網友回復：
您不能直接執行 {error} 因為錯誤未定義為組件中的狀態屬性。
你必須宣告它
const [error, setError] = useState('');
并且每當您設定錯誤時，您都必須使用 setError
if (!email.includes(atSymbol)) {
setError('Please enter a valid email');
console.log(error);
return;
}
然后在 JSX 中你可以使用
{error.length>0 && <p>{error}</p>}
盡管這將是所有輸入的常見錯誤
對于@kaneki21 的解決方案，我更喜歡 JSX 的這個解決方案
{error?.length>0? <p>{error}</p>:null}
如果錯誤是“未定義”或“空”
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/514813.html
標籤：javascript反应
上一篇：標簽<>在此瀏覽器中無法識別。如果您打算渲染一個React組件，請以大寫字母開頭
下一篇：反應通過鏈接打開下一頁