नियंत्रित फ़ॉर्म

हर फ़ॉर्म फ़ील्ड को React state से चलाना सीखें ताकि आप विश्वसनीय डेटा को मान्य और सबमिट कर सकें।

8 मिनट · 3 प्रश्न

React में, एक फ़ॉर्म तब पूर्वानुमानित बन जाता है जब हर फ़ील्ड नियंत्रित होती है: दिखाया गया मान कंपोनेंट की state से आता है, और हर कीस्ट्रोक onChange से होकर उस state को अपडेट करता है। DOM अब सत्य का स्रोत नहीं है - आपकी state है। व्यवहार में, आप value prop को एक state वेरिएबल से बाँधते हैं और एक हैंडलर देते हैं जो अपडेट फ़ंक्शन को कॉल करता है।

import { useState } from "react";

function EmailField() {
  const [email, setEmail] = useState("");

  return (
    <input
      type="email"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
    />
  );
}

एक असली फ़ॉर्म में शायद ही कभी सिर्फ़ एक फ़ील्ड होती है। useState कॉलों को ढेर करने के बजाय, मानों को एक ऑब्जेक्ट में समूहित करें और एक सामान्य हैंडलर लिखें। हर फ़ील्ड का name एट्रिब्यूट ऑब्जेक्ट की एक key से बिल्कुल मेल खाना चाहिए: यही हैंडलर को बताता है कि कौन-सी प्रॉपर्टी अपडेट करनी है।

const [form, setForm] = useState({
  username: "",
  password: "",
});

function handleChange(e) {
  const { name, value } = e.target;
  setForm((prev) => ({ ...prev, [name]: value }));
}

बचता है सबमिशन। डिफ़ॉल्ट रूप से, फ़ॉर्म सबमिट होने पर ब्राउज़र पेज को रीलोड कर देता है: अपने onSubmit हैंडलर की शुरुआत में e.preventDefault() को कॉल करें। यह डेटा भेजने से पहले उसे मान्य करने के लिए भी सही जगह है, क्योंकि पूरी फ़ॉर्म 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>
);

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. React में एक नियंत्रित फ़ील्ड को क्या परिभाषित करता है?
   • इसका मान DOM में संग्रहीत होता है और एक ref से पढ़ा जाता है
   • इसका मान state से आता है और हर कीस्ट्रोक onChange से होकर जाता है
   • फ़ॉर्म सबमिट होने तक यह केवल-पढ़ने योग्य रहती है
   • यह आपके टाइप किए गए डेटा को स्वतः मान्य करती है
2. आप एक <input> को value={email} देते हैं पर कोई onChange नहीं देते। क्या होता है?
   • फ़ील्ड जम जाती है: टाइप करने का अब कोई असर नहीं होता
   • फ़ील्ड सामान्य रूप से काम करती है, React इनपुट को खुद संभालता है
   • पहले ही render पर कंपोनेंट क्रैश हो जाता है
3. onSubmit हैंडलर में e.preventDefault() किसलिए है?
   • मूल फ़ॉर्म सबमिशन से शुरू होने वाले पेज रीलोड को रोकने के लिए
   • फ़ॉर्म फ़ील्ड को स्वतः साफ़ करने के लिए
   • इवेंट को पैरेंट कंपोनेंट तक प्रसारित होने से रोकने के लिए
   • ब्राउज़र की HTML मान्यता को अक्षम करने के लिए