ری ایکٹ فارم کمپوننٹ بنانے کی گائیڈ

React فارم کمپوننٹ بنانے کی گائیڈ

React میں فارمز بنانے کے لیے اسٹیٹ مینجمنٹ (state management) کی احتیاط سے ضرورت ہوتی ہے۔ یہ گائیڈ آپ کو شروع سے رجسٹریشن فارم بنانا سکھائے گی۔

آپ چار اہم تصورات سیکھیں گے:

• اسٹیٹ مینجمنٹ (State Management) تمام فارم فیلڈز کو ایک اسٹیٹ آبجیکٹ میں محفوظ کریں۔ نام، عمر، ای میل اور پاس ورڈ کا ریکارڈ رکھنے کے لیے useState ہک کا استعمال کریں۔

• ان پٹس کو ہینڈل کرنا (Handling Inputs) تمام ان پٹ تبدیلیوں کو سنبھالنے کے لیے ایک ہی فنکشن استعمال کریں۔ آپ پرانے ڈیٹا کو سپریڈ (spread) کر کے اور ان پٹ کے نام کی بنیاد پر نئی ویلیو شامل کر کے اسٹیٹ کو اپ ڈیٹ کرتے ہیں۔

• فارم ویلیڈیشن (Form Validation) سبمٹ کرنے سے پہلے چیک کریں کہ آیا تمام فیلڈز میں ڈیٹا موجود ہے۔ اگر کوئی فیلڈ خالی ہو تو الرٹ دکھائیں۔

• کی بورڈ سپورٹ (Keyboard Support) Enter کی (key) کے لیے ایک لسنر (listener) شامل کریں۔ اس سے صارفین بٹن پر کلک کیے بغیر فارم سبمٹ کر سکتے ہیں۔

کوڈ کی مثال:

import { useState } from "react";

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

function getdata(e) { const { name,