𝗥𝗲𝗮𝗰𝘁 𝗙𝗼𝗿𝗺 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝗕𝘂𝗶𝗹𝗱 𝗚𝘂𝗶𝗱𝗲
React मध्ये फॉर्म तयार करण्यासाठी काळजीपूर्वक state management आवश्यक आहे. हे मार्गदर्शक तुम्हाला शून्यापासून नोंदणी फॉर्म (registration form) कसा तयार करायचा हे दाखवेल.
तुम्ही चार मुख्य संकल्पना शिकाल:
• State Management
सर्व फॉर्म फील्ड्स एका state ऑब्जेक्टमध्ये साठवा. नाव, वय, ईमेल आणि पासवर्डचा मागोवा घेण्यासाठी useState hook वापरा.
• Handling Inputs सर्व इनपुट बदल व्यवस्थापित करण्यासाठी एका फंक्शनचा वापर करा. तुम्ही जुना डेटा स्प्रेड (spread) करून आणि इनपुटच्या नावावर आधारित नवीन व्हॅल्यू जोडून state अपडेट करता.
• Form Validation सबमिट करण्यापूर्वी सर्व फील्ड्समध्ये डेटा आहे की नाही हे तपासा. जर कोणतेही फील्ड रिकामे असेल तर अलर्ट दाखवा.
• Keyboard Support Enter की साठी एक listener जोडा. यामुळे वापरकर्ते बटणावर क्लिक न करता फॉर्म सबमिट करू शकतात.
कोड उदाहरण:
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 (
); }स्रोत: https://dev.to/jayashree_a84b6eff7bc414e/react-form-component-blog-explanation-with-code-3enh