अध्याय 5: फॉर्म्स और इवेंट्स (Forms and Events)

इस अध्याय में, हम रिएक्ट.js में फॉर्म्स और इवेंट्स को प्रबंधित करने के विभिन्न पहलुओं का अन्वेषण करेंगे। फॉर्म्स और इवेंट्स किसी भी वेब एप्लिकेशन का महत्वपूर्ण हिस्सा होते हैं, जो उपयोगकर्ताओं को डेटा इनपुट करने और विभिन्न कार्रवाइयों को ट्रिगर करने की अनुमति देते हैं। रिएक्ट में फॉर्म हैंडलिंग और इवेंट प्रबंधन को समझना और सही तरीके से लागू करना आपके एप्लिकेशन के उपयोगकर्ता अनुभव को बेहतर बना सकता है।

इस अध्याय में, आप निम्नलिखित विषयों को सीखेंगे:

• फॉर्म हैंडलिंग (Form Handling): रिएक्ट में फॉर्म डेटा को प्रबंधित और सबमिट करने के लिए आवश्यक तकनीकें।
• कंट्रोल्ड और अनकंट्रोल्ड कम्पोनेंट्स (Controlled and Uncontrolled Components): फॉर्म इनपुट्स को नियंत्रित करने के विभिन्न तरीके।
• इवेंट हैंडलिंग (Event Handling): रिएक्ट में इवेंट्स को कैप्चर और प्रबंधित करने के तरीके।
• वैलिडेशन (Validation): उपयोगकर्ता इनपुट्स को मान्य करने के लिए सर्वोत्तम प्रथाएं।
• फॉर्म सबमिशन (Form Submission): फॉर्म डेटा को सर्वर पर सबमिट करने और प्रोसेस करने के तरीके।

इन अवधारणाओं को समझने और उपयोग करने के बाद, आप रिएक्ट में विभिन्न प्रकार के फॉर्म्स और इवेंट्स को कुशलतापूर्वक प्रबंधित कर सकेंगे। यह अध्याय आपके फॉर्म्स और इवेंट्स हैंडलिंग कौशल को एक नई ऊँचाई पर ले जाएगा, जिससे आप अधिक इंटरैक्टिव और उत्तरदायी वेब एप्लिकेशन बना सकेंगे।

फॉर्म हैंडलिंग (Form Handling)

रिएक्ट.js में फॉर्म हैंडलिंग एक महत्वपूर्ण कौशल है, जो आपको उपयोगकर्ता इनपुट को कुशलतापूर्वक प्रबंधित और प्रोसेस करने की अनुमति देता है। फॉर्म हैंडलिंग के माध्यम से आप विभिन्न प्रकार के फॉर्म्स को बना सकते हैं, उपयोगकर्ता द्वारा दर्ज किए गए डेटा को स्टोर कर सकते हैं, और आवश्यकतानुसार डेटा को सर्वर पर सबमिट कर सकते हैं। इस सेक्शन में, हम रिएक्ट में फॉर्म्स को हैंडल करने के विभिन्न पहलुओं को कवर करेंगे।

कंट्रोल्ड और अनकंट्रोल्ड कम्पोनेंट्स (Controlled and Uncontrolled Components)

रिएक्ट में फॉर्म हैंडलिंग के दो मुख्य दृष्टिकोण होते हैं: कंट्रोल्ड कम्पोनेंट्स और अनकंट्रोल्ड कम्पोनेंट्स।

1. कंट्रोल्ड कम्पोनेंट्स (Controlled Components):
   • कंट्रोल्ड कम्पोनेंट्स वे फॉर्म इनपुट्स होते हैं जिनका स्टेट रिएक्ट द्वारा प्रबंधित किया जाता है।
   • हर बार जब उपयोगकर्ता इनपुट में कोई बदलाव करता है, तो एक इवेंट हैंडलर उसे पकड़ता है और रिएक्ट स्टेट को अपडेट करता है।
   • यह दृष्टिकोण आपको फॉर्म डेटा पर पूरा नियंत्रण देता है।

   उदाहरण:

   import React, { useState } from 'react';
   
   function ControlledForm() {
     const [name, setName] = useState('');
   
     const handleChange = (event) => {
       setName(event.target.value);
     };
   
     const handleSubmit = (event) => {
       event.preventDefault();
       alert('Submitted name: ' + name);
     };
   
     return (
       <form onSubmit={handleSubmit}>
         <label>
           Name:
           <input type="text" value={name} onChange={handleChange} />
         </label>
         <button type="submit">Submit</button>
       </form>
     );
   }
   
   export default ControlledForm;
   

    

2. अनकंट्रोल्ड कम्पोनेंट्स (Uncontrolled Components):
   • अनकंट्रोल्ड कम्पोनेंट्स वे फॉर्म इनपुट्स होते हैं जिनका स्टेट सीधे DOM द्वारा प्रबंधित किया जाता है।
   • इस दृष्टिकोण में, आप रिफ्स (refs) का उपयोग करके सीधे DOM से डेटा प्राप्त कर सकते हैं।
   • यह दृष्टिकोण सरल है, लेकिन इसमें फॉर्म डेटा पर कम नियंत्रण होता है।

   उदाहरण:

   import React, { useRef } from 'react';
   
   function UncontrolledForm() {
     const nameInput = useRef(null);
   
     const handleSubmit = (event) => {
       event.preventDefault();
       alert('Submitted name: ' + nameInput.current.value);
     };
   
     return (
       <form onSubmit={handleSubmit}>
         <label>
           Name:
           <input type="text" ref={nameInput} />
         </label>
         <button type="submit">Submit</button>
       </form>
     );
   }
   
   export default UncontrolledForm;
   

    

फॉर्म इवेंट हैंडलिंग (Form Event Handling)

फॉर्म इवेंट हैंडलिंग के माध्यम से, आप उपयोगकर्ता इनपुट को कैप्चर और प्रबंधित कर सकते हैं। रिएक्ट में, इवेंट हैंडलर्स जावास्क्रिप्ट के सिंथेटिक इवेंट्स का उपयोग करते हैं, जो ब्राउज़र इवेंट्स के अनुरूप होते हैं। सामान्यतः उपयोग किए जाने वाले इवेंट हैंडलर्स में onChange, onSubmit, और onClick शामिल हैं।

फॉर्म वैलिडेशन (Form Validation)

फॉर्म वैलिडेशन उपयोगकर्ता द्वारा दर्ज किए गए डेटा की सटीकता और पूर्णता सुनिश्चित करने के लिए आवश्यक है। रिएक्ट में, आप कस्टम वैलिडेशन लॉजिक लागू कर सकते हैं या तृतीय-पक्ष वैलिडेशन लाइब्रेरी का उपयोग कर सकते हैं। फॉर्म वैलिडेशन में निम्नलिखित शामिल हो सकते हैं:

• आवश्यक फील्ड्स की जांच करना।
• इनपुट डेटा की स्वरूप जांच (जैसे, ईमेल फॉर्मेट, पासवर्ड स्ट्रेंथ)।
• उपयोगकर्ता को वास्तविक समय में फीडबैक प्रदान करना।

फॉर्म सबमिशन (Form Submission)

फॉर्म सबमिशन के दौरान, आप फॉर्म डेटा को सर्वर पर भेज सकते हैं। इसे करने के लिए, आप fetch या axios जैसी जावास्क्रिप्ट लाइब्रेरी का उपयोग कर सकते हैं। फॉर्म सबमिट करने से पहले, आप वैलिडेशन कर सकते हैं और उपयोगकर्ता को सबमिशन स्टेटस के बारे में सूचित कर सकते हैं।

import React, { useState } from 'react';
import axios from 'axios';

function FormWithSubmission() {
  const [name, setName] = useState('');
  const [submitted, setSubmitted] = useState(false);

  const handleChange = (event) => {
    setName(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    axios.post('/api/submit', { name })
      .then(response => {
        setSubmitted(true);
        alert('Form submitted successfully!');
      })
      .catch(error => {
        alert('Form submission failed!');
      });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
      {submitted && <p>Form has been submitted!</p>}
    </form>
  );
}

export default FormWithSubmission;

कंट्रोल्ड और अनकंट्रोल्ड कम्पोनेंट्स (Controlled and Uncontrolled Components)

रिएक्ट में फॉर्म्स और इनपुट्स को हैंडल करने के दो मुख्य दृष्टिकोण होते हैं: कंट्रोल्ड कम्पोनेंट्स और अनकंट्रोल्ड कम्पोनेंट्स। इन दोनों दृष्टिकोणों का उपयोग करके आप उपयोगकर्ता इनपुट को कैप्चर और प्रबंधित कर सकते हैं, लेकिन उनके कार्य करने के तरीके में कुछ महत्वपूर्ण अंतर होते हैं। इस सेक्शन में, हम इन दोनों दृष्टिकोणों की विशेषताओं, लाभों, और उपयोग के तरीकों पर चर्चा करेंगे।

कंट्रोल्ड कम्पोनेंट्स (Controlled Components)

कंट्रोल्ड कम्पोनेंट्स वे कम्पोनेंट्स होते हैं जिनका स्टेट रिएक्ट द्वारा प्रबंधित किया जाता है। हर बार जब उपयोगकर्ता इनपुट में कोई बदलाव करता है, तो एक इवेंट हैंडलर उसे पकड़ता है और रिएक्ट स्टेट को अपडेट करता है। इस दृष्टिकोण से, इनपुट्स के वैल्यू को रिएक्ट स्टेट द्वारा नियंत्रित किया जाता है, जिससे डेटा पर पूरा नियंत्रण मिलता है।

कंट्रोल्ड कम्पोनेंट्स का उदाहरण:

import React, { useState } from 'react';

function ControlledForm() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('Submitted name: ' + name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default ControlledForm;

अनकंट्रोल्ड कम्पोनेंट्स (Uncontrolled Components)

अनकंट्रोल्ड कम्पोनेंट्स वे कम्पोनेंट्स होते हैं जिनका स्टेट सीधे DOM द्वारा प्रबंधित किया जाता है। इस दृष्टिकोण में, आप रिफ्स (refs) का उपयोग करके सीधे DOM से डेटा प्राप्त कर सकते हैं। अनकंट्रोल्ड कम्पोनेंट्स का उपयोग करना सरल है, लेकिन इसमें फॉर्म डेटा पर कम नियंत्रण होता है।

अनकंट्रोल्ड कम्पोनेंट्स का उदाहरण:

import React, { useRef } from 'react';

function UncontrolledForm() {
  const nameInput = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('Submitted name: ' + nameInput.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" ref={nameInput} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default UncontrolledForm;

कंट्रोल्ड और अनकंट्रोल्ड कम्पोनेंट्स के बीच तुलना (Comparison Between Controlled and Uncontrolled Components)

कंट्रोल्ड कम्पोनेंट्स के लाभ:

• पूरा नियंत्रण (Full Control): इनपुट डेटा पर पूरा नियंत्रण होता है।
• डेटा वैलिडेशन (Data Validation): इनपुट डेटा को आसानी से वैलिडेट और प्रोसेस किया जा सकता है।
• सिंक स्टेट (Sync State): स्टेट हमेशा इनपुट के वैल्यू के साथ सिंक में रहता है।

कंट्रोल्ड कम्पोनेंट्स के नुकसान:

• अधिक कोड (More Code): हर इनपुट के लिए इवेंट हैंडलर लिखने की आवश्यकता होती है।
• कुकीचैल (Boilerplate Code): छोटे फॉर्म्स के लिए अधिक कोड लिखना पड़ता है।

अनकंट्रोल्ड कम्पोनेंट्स के लाभ:

• सरलता (Simplicity): कम कोड के साथ काम करता है।
• फास्ट इम्प्लीमेंटेशन (Fast Implementation): छोटे और सरल फॉर्म्स के लिए जल्दी लागू किया जा सकता है।

अनकंट्रोल्ड कम्पोनेंट्स के नुकसान:

• कम नियंत्रण (Less Control): इनपुट डेटा पर कम नियंत्रण होता है।
• डेटा वैलिडेशन कठिन (Data Validation Difficult): डेटा वैलिडेशन और प्रोसेसिंग अधिक कठिन हो सकती है।
• री-रेंडरिंग मुद्दे (Re-rendering Issues): स्टेट और इनपुट वैल्यू सिंक में नहीं होते हैं, जिससे री-रेंडरिंग समस्याएं हो सकती हैं।

इवेंट हैंडलिंग (Event Handling)

रिएक्ट.js में इवेंट हैंडलिंग एक महत्वपूर्ण कौशल है जो आपको उपयोगकर्ता इंटरैक्शन को कैप्चर और प्रतिक्रिया करने की अनुमति देता है। इवेंट हैंडलिंग के माध्यम से आप बटन क्लिक, फॉर्म सबमिशन, कीबोर्ड इनपुट और अन्य उपयोगकर्ता क्रियाओं पर प्रतिक्रिया कर सकते हैं। रिएक्ट इवेंट हैंडलिंग जावास्क्रिप्ट के सिंथेटिक इवेंट्स का उपयोग करता है, जो ब्राउज़र इवेंट्स के अनुरूप होते हैं लेकिन अधिक प्रभावी और क्रॉस-ब्राउज़र संगत होते हैं।

इवेंट हैंडलिंग का परिचय (Introduction to Event Handling)

रिएक्ट में, इवेंट हैंडलिंग HTML और जावास्क्रिप्ट के पारंपरिक इवेंट हैंडलिंग से थोड़ा अलग है। रिएक्ट सिंथेटिक इवेंट्स का उपयोग करता है, जो सभी ब्राउज़रों में एक समान तरीके से काम करते हैं। सिंथेटिक इवेंट्स एक इंटरफेस प्रदान करते हैं जो ब्राउज़र इवेंट्स के साथ समानता रखते हैं, लेकिन वे रिएक्ट द्वारा नियंत्रित होते हैं।

इवेंट हैंडलर्स का उपयोग (Using Event Handlers)

रिएक्ट में इवेंट हैंडलर्स को JSX में इवेंट एट्रिब्यूट्स के रूप में जोड़ा जाता है। इवेंट एट्रिब्यूट्स जावास्क्रिप्ट के कैमेलकेस में होते हैं। उदाहरण के लिए, onclick की बजाय onClick का उपयोग किया जाता है।

बटन क्लिक इवेंट हैंडलिंग का उदाहरण:

import React from 'react';

function ClickButton() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return (
    <button onClick={handleClick}>Click Me</button>
  );
}

export default ClickButton;

सामान्य इवेंट्स (Common Events)

रिएक्ट में कई प्रकार के इवेंट्स होते हैं जिन्हें आप कैप्चर और हैंडल कर सकते हैं। कुछ सामान्य इवेंट्स निम्नलिखित हैं:

1. क्लिक इवेंट (Click Event):

   <button onClick={handleClick}>Click Me</button>
   

    

2. चेंज इवेंट (Change Event):

   <input type="text" onChange={handleChange} />
   

    

3. सबमिट इवेंट (Submit Event):

   <form onSubmit={handleSubmit}>
     <button type="submit">Submit</button>
   </form>
   

    

4. की प्रेस इवेंट (Key Press Event):

   <input type="text" onKeyPress={handleKeyPress} />
   

    

इवेंट हैंडलर्स में आर्ग्युमेंट्स पास करना (Passing Arguments to Event Handlers)

कभी-कभी आपको इवेंट हैंडलर में आर्ग्युमेंट्स पास करने की आवश्यकता होती है। आप इसे ऐरो फंक्शन या bind का उपयोग करके कर सकते हैं।

आर्ग्युमेंट्स पास करने का उदाहरण:

import React from 'react';

function ArgumentButton() {
  const handleClick = (id, event) => {
    alert(`Button ${id} clicked!`);
  };

  return (
    <button onClick={(event) => handleClick(1, event)}>Click Me</button>
  );
}

export default ArgumentButton;

सिंथेटिक इवेंट्स (Synthetic Events)

रिएक्ट में सभी इवेंट्स सिंथेटिक इवेंट्स होते हैं। सिंथेटिक इवेंट्स एक क्रॉस-ब्राउज़र रैपर प्रदान करते हैं जो ब्राउज़र इवेंट्स को सामान्य करता है, जिससे सभी ब्राउज़रों में इवेंट हैंडलिंग एक समान तरीके से काम करती है।

सिंथेटिक इवेंट का उदाहरण:

import React from 'react';

function SyntheticEventExample() {
  const handleChange = (event) => {
    console.log(event.target.value);
  };

  return (
    <input type="text" onChange={handleChange} />
  );
}

export default SyntheticEventExample;

इवेंट हैंडलिंग के लाभ (Benefits of Event Handling)

• यूजर इंटरैक्शन (User Interaction): इवेंट हैंडलिंग उपयोगकर्ता इंटरैक्शन को कैप्चर और प्रतिक्रिया करने की अनुमति देता है।
• कंट्रोल (Control): आप अपने एप्लिकेशन के विभिन्न हिस्सों में उपयोगकर्ता क्रियाओं पर प्रतिक्रिया कर सकते हैं।
• डायनामिक इंटरफेस (Dynamic Interfaces): इवेंट हैंडलिंग के माध्यम से आप डायनामिक और इंटरैक्टिव यूजर इंटरफेस बना सकते हैं।