我想通過檢查是否填寫了所有欄位來驗證我的表單。我很新來反應。有什么建議？我已經準備好了狀態，但我幾乎被卡住了。預先感謝您的回復。我很感激
我的代碼：
const [fields, setFields] = useState({
name: '',
email: '',
subject: '',
msg: '',
});
const handleSubmit = (event) => {
emailjs.sendForm().then(
(result) => {
console.log(result.text);
},
(error) => {
console.log(error.text);
}
);
alert('form submitted');
event.target.reset();
event.preventDefault();
};
<form onSubmit={handleSubmit}>
<div className={styles.firstInputs}>
<div>
<label>name</label>
<br />
<input
type='text'
refs='name'
name='name'
placeholder='your name'
></input>
</div>
<div>
<label>email</label>
<br />
<input type='email' name='email' placeholder='email'></input>
</div>
</div>
<label>subject</label>
<br />
<input
type='text'
name='subject'
placeholder='subject'
className={styles.subject}
></input>{' '}
<br />
<label>message</label> <br />
<textarea placeholder='your message' name='message'></textarea>
<br />
<button type='submit' className={styles.sendForm}>
SUBMIT
</button>
</form>;
uj5u.com熱心網友回復：
您在那里沒有正確使用您的狀態。
將欄位的值設定為狀態中的值，然后在欄位更改時更改狀態。
不要忘記您可以將required屬性添加到您的 HTML 元素以確保它獲得某種值。
然后您只需在提交前驗證狀態。
不要像人們在這里建議的那樣一直依賴包。正如你所說，你是 React 的新手，所以學習手動設定（這對于小表單來說基本上是更少的作業）。一旦你理解了這一點，然后考慮是否有另一個依賴真的可以節省你的時間。
請參閱下面的示例代碼：https : //codesandbox.io/s/form-validation-pbbf1
import { useState } from "react";
import "./styles.css";
const defaultFields = { name: "", email: "", subject: "", message: "" };
export default function App() {
const [fields, setFields] = useState(defaultFields);
const handleSubmit = (event) => {
// Stop form from resetting
event.preventDefault();
// Check fields
if (fields.name.length < 2) {
return alert("Name should be greater than 1 character.");
}
// etc...
// Send off data
/*
emailjs.sendForm().then(
(result) => {
console.log(result.text);
},
(error) => {
console.log(error.text);
}
);
*/
// I would probably put these two
// lines inside the then block above.
setFields(defaultFields);
alert("form submitted");
};
const handleFieldChange = (e) => {
const { name, value } = e.target;
setFields((previousFields) => ({ ...previousFields, [name]: value }));
};
return (
<form onSubmit={handleSubmit}>
{/* NAME */}
<div>
<label>name</label>
<br />
<input
type="text"
name="name"
placeholder="your name"
value={fields.name}
required
onChange={handleFieldChange}
></input>
</div>
{/* EMAIL */}
<div>
<label>email</label>
<br />
<input
type="email"
name="email"
placeholder="email"
value={fields.email}
required
onChange={handleFieldChange}
></input>
</div>
{/* SUBJECT */}
<div>
<label>subject</label>
<br />
<input
type="text"
name="subject"
placeholder="subject"
value={fields.subject}
required
onChange={handleFieldChange}
></input>{" "}
<br />
</div>
{/* MESSAGE */}
<div>
<label>message</label> <br />
<textarea
placeholder="your message"
name="message"
value={fields.message}
required
onChange={handleFieldChange}
></textarea>
</div>
<button type="submit">SUBMIT</button>
</form>
);
}
uj5u.com熱心網友回復：
您可以采用 2 種不同的方法。
手動的
只需添加簡單的 if 陳述句來檢查值是否有效，您就可以隨心所欲地具體化。缺點是可能作業量很大而且很麻煩
if(typeof fields.name === 'string' && fields.name.lenght >= 3) { /** continue **/ } else { return /** or show some type of message to the user **/}
圖書館
這就是我要推薦的。查看像formik和這樣的庫react hook form
uj5u.com熱心網友回復：
我認為 formik 是一個很好的包，可以使用 yup 處理表單以進行錯誤驗證
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/366444.html
標籤：javascript 反应 形式 验证