เรียนรู้การขับเคลื่อนทุกฟิลด์ของฟอร์มจาก state ของ React เพื่อให้คุณตรวจสอบและส่งข้อมูลที่เชื่อถือได้
เปิดบทเรียนนี้ใน Kodokonใน React ฟอร์มจะคาดเดาได้เมื่อทุกฟิลด์เป็นแบบ ควบคุม (controlled): ค่าที่แสดงมาจาก state ของคอมโพเนนต์ และทุกครั้งที่กดแป้นพิมพ์จะผ่าน onChange เพื่ออัปเดต state นั้น DOM ไม่ใช่แหล่งความจริงอีกต่อไป - state ของคุณต่างหากที่เป็น ในทางปฏิบัติ คุณผูก prop value เข้ากับตัวแปร state และจัดเตรียม handler ที่เรียกฟังก์ชันอัปเดต
import { useState } from "react";
function EmailField() {
const [email, setEmail] = useState("");
return (
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
);
}ฟอร์มจริงมักไม่ได้มีฟิลด์เดียว แทนที่จะเรียก useState ซ้อนกันหลายครั้ง ให้รวมค่าต่าง ๆ ไว้ในออบเจ็กต์เดียวและเขียน handler แบบทั่วไป (generic handler) แอตทริบิวต์ name ของแต่ละฟิลด์ต้องตรงกับ key ของออบเจ็กต์อย่างเป๊ะ ๆ: นั่นคือสิ่งที่บอก handler ว่าจะอัปเดตพรอเพอร์ตีไหน
const [form, setForm] = useState({
username: "",
password: "",
});
function handleChange(e) {
const { name, value } = e.target;
setForm((prev) => ({ ...prev, [name]: value }));
}เหลือแต่การส่งข้อมูล โดยค่าเริ่มต้น เบราว์เซอร์จะรีโหลดหน้าเมื่อฟอร์มถูกส่ง: ให้เรียก e.preventDefault() ที่บรรทัดบนสุดของ handler onSubmit ของคุณ อีกทั้งยังเป็นจุดที่เหมาะจะ ตรวจสอบข้อมูล ก่อนส่งด้วย เพราะ state ของฟอร์มทั้งหมดอยู่ในมือแล้ว
function handleSubmit(e) {
e.preventDefault();
if (form.username.trim() === "") {
alert("Username is required.");
return;
}
console.log("Submitting:", form);
}
return (
<form onSubmit={handleSubmit}>
<input
name="username"
value={form.username}
onChange={handleChange}
/>
<button type="submit">Create account</button>
</form>
);value={email} ไปยัง <input> โดยไม่ระบุ onChange จะเกิดอะไรขึ้น?e.preventDefault() ใน handler onSubmit มีไว้เพื่ออะไร?