𝗥𝗲𝗮𝗰𝘁 𝗙𝗼𝗿𝗺 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝗕𝘂𝗶𝗹𝗱 𝗚𝘂𝗶𝗱𝗲

Việc xây dựng các biểu mẫu trong React đòi hỏi việc quản lý state một cách cẩn thận. Hướng dẫn này sẽ chỉ cho bạn cách xây dựng một biểu mẫu đăng ký từ con số không.

Bạn sẽ học được bốn khái niệm chính:

• Quản lý State Lưu trữ tất cả các trường trong biểu mẫu vào một đối tượng state duy nhất. Sử dụng hook useState để theo dõi tên, tuổi, email và mật khẩu.

• Xử lý Input Sử dụng một hàm duy nhất để quản lý tất cả các thay đổi của input. Bạn cập nhật state bằng cách spread dữ liệu cũ và thêm giá trị mới dựa trên tên của input.

• Kiểm tra tính hợp lệ của biểu mẫu (Form Validation) Kiểm tra xem tất cả các trường đã có dữ liệu hay chưa trước khi gửi. Hiển thị một cảnh báo nếu có bất kỳ trường nào bị trống.

• Hỗ trợ bàn phím Thêm một trình lắng nghe cho phím Enter. Điều này cho phép người dùng gửi biểu mẫu mà không cần nhấp vào nút.

Ví dụ mã nguồn:

import { useState } from "react";

function FormValidation() { const [userdata, setUserdata] = useState({ name: "", age: "", mobile: "", email: "", dob: "", password: "" });

function getdata(e) { const { name, value } = e.target; setUserdata({ ...userdata, [name]: value }); }

function validate() { const { name, age, mobile, email, dob, password } = userdata; if (name && age && mobile && email && dob && password) { alert("Submitted successfully"); } else { alert("Please fill all fields"); } }

function handlekey(e) { if (e.key === "Enter") { validate(); } }

return (

); }

Nguồn: https://dev.to/jayashree_a84b6eff7bc414e/react-form-component-blog-explanation-with-code-3enh