रिएक्ट useFormState: फॉर्म स्टेट मैनेजमेंट के लिए एक व्यापक गाइड

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

useFormState क्या है?

useFormState एक रिएक्ट हुक है जो फॉर्म मूल्यों को स्टोर और अपडेट करने, इनपुट परिवर्तनों को ट्रैक करने, वैलिडेशन को संभालने और सबमिशन स्टेट का प्रबंधन करने के लिए एक केंद्रीय स्थान प्रदान करके फॉर्म स्टेट मैनेजमेंट को सरल बनाता है। यह बॉयलरप्लेट कोड को कम करके और कोड पठनीयता में सुधार करके जटिल फॉर्म बनाने की प्रक्रिया को सुव्यवस्थित करता है।

प्रत्येक फॉर्म फ़ील्ड के लिए useState का उपयोग करने वाले पारंपरिक तरीकों की तुलना में, useFormState कई फायदे प्रदान करता है:

• केंद्रीकृत स्टेट: सभी फॉर्म डेटा को एक ही स्टेट ऑब्जेक्ट में प्रबंधित करता है, जिससे संगठन में सुधार होता है और जटिलता कम होती है।
• सरल अपडेट: एक साथ कई फॉर्म फ़ील्ड को अपडेट करने का एक सुविधाजनक तरीका प्रदान करता है।
• अंतर्निहित वैलिडेशन: फॉर्म वैलिडेशन के लिए अंतर्निहित समर्थन प्रदान करता है, जिससे आप आसानी से फॉर्म डेटा को मान्य कर सकते हैं और त्रुटि संदेश प्रदर्शित कर सकते हैं।
• सबमिशन हैंडलिंग: फॉर्म सबमिशन स्टेट के प्रबंधन के लिए तंत्र प्रदान करता है, जैसे कि यह ट्रैक करना कि क्या फॉर्म वर्तमान में सबमिट हो रहा है या पहले ही सबमिट हो चुका है।
• बेहतर पठनीयता: फॉर्म लॉजिक को सरल बनाता है, जिससे इसे समझना और बनाए रखना आसान हो जाता है।

बुनियादी उपयोग

आइए एक सरल उदाहरण से शुरू करें कि दो इनपुट फ़ील्ड: नाम और ईमेल के साथ एक साधारण फॉर्म में useFormState का उपयोग कैसे करें।

इंस्टॉलेशन

सबसे पहले, आपको useFormState हुक इंस्टॉल करना होगा। इसे इंस्टॉल करने की विधि उस लाइब्रेरी या फ्रेमवर्क पर निर्भर करेगी जिसका आप उपयोग कर रहे हैं जो हुक प्रदान करता है (उदाहरण के लिए, रिएक्ट हुक फॉर्म, फॉर्मिक एक कस्टम हुक के साथ, या एक समान समाधान)। यह उदाहरण react-form-state नामक एक काल्पनिक लाइब्रेरी का उपयोग करता है (इसे अपनी वास्तविक लाइब्रेरी से बदलें):

            npm install react-form-state

            

              
                Copy
              
            
          

उदाहरण कोड

            import React from 'react';
import { useFormState } from 'react-form-state';

function MyForm() {
  const { values, errors, touched, handleChange, handleSubmit, isSubmitting } = useFormState({
    initialValues: {
      name: '',
      email: '',
    },
    onSubmit: async (values) => {
      // Simulate an API call
      await new Promise((resolve) => setTimeout(resolve, 1000));
      alert(JSON.stringify(values));
    },
    validate: (values) => {
      const errors = {};
      if (!values.name) {
        errors.name = 'Name is required';
      }
      if (!values.email) {
        errors.email = 'Email is required';
      } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) {
        errors.email = 'Invalid email format';
      }
      return errors;
    },
  });

  return (
    

      

        Name:
        
        {touched.name && errors.name && {errors.name}}
      
      

        Email:
        
        {touched.email && errors.email && {errors.email}}
      
      
        {isSubmitting ? 'Submitting...' : 'Submit'}
      
    
  );
}

export default MyForm;

            

              
                Copy
              
            
          

व्याख्या

• useFormState आयात करें: हम react-form-state लाइब्रेरी से useFormState हुक आयात करते हैं।
• हुक को इनिशियलाइज़ करें: हम एक ऑप्शंस ऑब्जेक्ट के साथ useFormState को कॉल करते हैं। इस ऑब्जेक्ट में शामिल हैं:
• initialValues: एक ऑब्जेक्ट जो फॉर्म फ़ील्ड्स के प्रारंभिक मानों को परिभाषित करता है।
• onSubmit: एक फ़ंक्शन जो फॉर्म सबमिट होने पर कॉल किया जाता है। यह एक तर्क के रूप में फॉर्म मान प्राप्त करता है। इस उदाहरण में, हम setTimeout के साथ एक एपीआई कॉल का अनुकरण करते हैं।
• validate: एक फ़ंक्शन जो फॉर्म मानों को मान्य करता है। इसे एक ऑब्जेक्ट लौटाना चाहिए जहां कुंजियाँ फ़ील्ड नाम हैं और मान त्रुटि संदेश हैं। यदि कोई फ़ील्ड मान्य है, तो उसे लौटाए गए ऑब्जेक्ट में शामिल नहीं किया जाना चाहिए।
• मानों को डीस्ट्रक्चर करें: हम निम्नलिखित मान प्राप्त करने के लिए useFormState के रिटर्न मान को डीस्ट्रक्चर करते हैं:
• values: फॉर्म फ़ील्ड्स के वर्तमान मानों वाला एक ऑब्जेक्ट।
• errors: किसी भी वैलिडेशन त्रुटियों वाला एक ऑब्जेक्ट।
• touched: एक ऑब्जेक्ट जो बताता है कि कौन से फ़ील्ड छुए गए हैं (यानी, फोकस किया गया है और फिर ब्लर किया गया है)।
• handleChange: एक फ़ंक्शन जो इनपुट फ़ील्ड बदलने पर फॉर्म मानों को अपडेट करता है।
• handleSubmit: एक फ़ंक्शन जो फॉर्म सबमिशन को संभालता है।
• isSubmitting: एक बूलियन जो बताता है कि क्या फॉर्म वर्तमान में सबमिट हो रहा है।
• फॉर्म रेंडरिंग: हम इनपुट फ़ील्ड के साथ फॉर्म को रेंडर करते हैं। प्रत्येक इनपुट फ़ील्ड values ऑब्जेक्ट और handleChange फ़ंक्शन से जुड़ा है।
• त्रुटि प्रदर्शन: हम प्रत्येक फ़ील्ड के लिए त्रुटि संदेश प्रदर्शित करते हैं यदि फ़ील्ड को छुआ गया है और कोई त्रुटि है।
• सबमिट बटन: जब फॉर्म सबमिट हो रहा होता है तो सबमिट बटन अक्षम हो जाता है।

उन्नत सुविधाएँ

useFormState अधिक जटिल फॉर्म परिदृश्यों को संभालने के लिए कई उन्नत सुविधाएँ प्रदान करता है।

कस्टम वैलिडेशन

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

            const validate = (values) => {
  const errors = {};
  if (!values.phoneNumber) {
    errors.phoneNumber = 'Phone number is required';
  } else {
    // Example: Validate US phone number format
    if (values.countryCode === 'US' && !/^\d{3}-\d{3}-\d{4}$/.test(values.phoneNumber)) {
      errors.phoneNumber = 'Invalid US phone number format (e.g., 123-456-7890)';
    }
    // Example: Validate UK phone number format
    if (values.countryCode === 'UK' && !/^\d{5} \d{6}$/.test(values.phoneNumber)) {
      errors.phoneNumber = 'Invalid UK phone number format (e.g., 01632 960001)';
    }
    // More country-specific validation can be added here
  }
  return errors;
};

            

              
                Copy
              
            
          

एसिंक्रोनस वैलिडेशन

उन वैलिडेशन के लिए जिन्हें एसिंक्रोनस ऑपरेशंस की आवश्यकता होती है (जैसे, यह जांचना कि क्या कोई उपयोगकर्ता नाम उपलब्ध है), आप एक एसिंक्रोनस validate फ़ंक्शन का उपयोग कर सकते हैं।

            const validate = async (values) => {
  const errors = {};
  // Simulate an API call to check username availability
  const isUsernameAvailable = await checkUsernameAvailability(values.username);
  if (!isUsernameAvailable) {
    errors.username = 'Username is already taken';
  }
  return errors;
};

async function checkUsernameAvailability(username) {
  // Replace with your actual API call
  await new Promise((resolve) => setTimeout(resolve, 500));
  // Simulate username taken
  return username !== 'taken_username';
}

            

              
                Copy
              
            
          

डायनामिक फॉर्म

useFormState का उपयोग डायनामिक फॉर्म बनाने के लिए किया जा सकता है जहां उपयोगकर्ता की सहभागिता के आधार पर फॉर्म फ़ील्ड जोड़े या हटाए जाते हैं। यह विशेष रूप से उन फॉर्मों के लिए उपयोगी है जिनमें इनपुट फ़ील्ड की एक परिवर्तनीय संख्या होती है।

            import React, { useState } from 'react';
import { useFormState } from 'react-form-state';

function DynamicForm() {
  const [items, setItems] = useState(['item1']);

  const { values, handleChange, handleSubmit } = useFormState({
    initialValues: items.reduce((acc, item) => {
      acc[item] = '';
      return acc;
    }, {}),
    onSubmit: (values) => {
      alert(JSON.stringify(values));
    },
  });

  const addItem = () => {
    const newItem = `item${items.length + 1}`;
    setItems([...items, newItem]);
  };

  return (
    

      {items.map((item) => (
        

          {item}:
          
        
      ))}
      
        Add Item
      
      Submit
    
  );
}

export default DynamicForm;

            

              
                Copy
              
            
          

ऐरे फ़ील्ड्स को संभालना

जब आपके फॉर्म में ऐरे फ़ील्ड्स शामिल होते हैं (जैसे, शौक या कौशल की एक सूची), तो useFormState को इन ऐरे मानों को कुशलतापूर्वक प्रबंधित करने के लिए अनुकूलित किया जा सकता है। यहाँ एक उदाहरण है:

            import React from 'react';
import { useFormState } from 'react-form-state';

function SkillsForm() {
  const { values, handleChange, handleSubmit } = useFormState({
    initialValues: {
      skills: [''], // Start with one empty skill
    },
    onSubmit: (values) => {
      alert(JSON.stringify(values));
    },
  });

  const addSkill = () => {
    handleChange({ target: { name: 'skills', value: [...values.skills, ''] } });
  };

  const updateSkill = (index, value) => {
    const newSkills = [...values.skills];
    newSkills[index] = value;
    handleChange({ target: { name: 'skills', value: newSkills } });
  };

  return (
    

      Skills:
      {values.skills.map((skill, index) => (
        

           updateSkill(index, e.target.value)}
          />
        
      ))}
      
        Add Skill
      
      Submit
    
  );
}

export default SkillsForm;

            

              
                Copy
              
            
          

एक्सेसिबिलिटी संबंधी विचार

फॉर्म बनाते समय, एक्सेसिबिलिटी पर विचार करना महत्वपूर्ण है ताकि यह सुनिश्चित हो सके कि विकलांग उपयोगकर्ता फॉर्म का प्रभावी ढंग से उपयोग कर सकें। यहां कुछ एक्सेसिबिलिटी युक्तियां दी गई हैं:

• सिमेंटिक एचटीएमएल का उपयोग करें: उपयुक्त एचटीएमएल तत्वों जैसे <label>, <input>, <textarea>, और <button> का उपयोग करें।
• सभी फॉर्म फ़ील्ड्स के लिए लेबल प्रदान करें: फॉर्म फ़ील्ड्स के साथ लेबल जोड़ने के लिए <label> तत्व का उपयोग करें। सुनिश्चित करें कि लेबल का for एट्रिब्यूट इनपुट फ़ील्ड के id एट्रिब्यूट से मेल खाता है।
• ARIA एट्रिब्यूट्स का उपयोग करें: सहायक प्रौद्योगिकियों को फॉर्म फ़ील्ड्स के बारे में अतिरिक्त जानकारी प्रदान करने के लिए ARIA एट्रिब्यूट्स का उपयोग करें। उदाहरण के लिए, त्रुटि संदेशों को फॉर्म फ़ील्ड्स के साथ जोड़ने के लिए aria-describedby का उपयोग करें।
• स्पष्ट और संक्षिप्त त्रुटि संदेश प्रदान करें: त्रुटि संदेश समझने में आसान होने चाहिए और त्रुटियों को ठीक करने के तरीके पर मार्गदर्शन प्रदान करना चाहिए।
• पर्याप्त रंग कंट्रास्ट सुनिश्चित करें: दृष्टिबाधित उपयोगकर्ताओं के लिए फॉर्म को पठनीय बनाने के लिए टेक्स्ट और पृष्ठभूमि रंगों के बीच पर्याप्त रंग कंट्रास्ट का उपयोग करें।
• सहायक प्रौद्योगिकियों के साथ परीक्षण करें: यह सुनिश्चित करने के लिए कि यह विकलांग उपयोगकर्ताओं के लिए सुलभ है, स्क्रीन रीडर जैसी सहायक प्रौद्योगिकियों के साथ फॉर्म का परीक्षण करें।

सर्वोत्तम प्रथाएं

यहाँ useFormState का उपयोग करने के लिए कुछ सर्वोत्तम प्रथाएं दी गई हैं:

• validate फ़ंक्शन को शुद्ध रखें: validate फ़ंक्शन एक शुद्ध फ़ंक्शन होना चाहिए, जिसका अर्थ है कि इसका कोई साइड इफेक्ट नहीं होना चाहिए और हमेशा समान इनपुट के लिए समान आउटपुट लौटाना चाहिए।
• मेमोइज़ेशन का उपयोग करें: फॉर्म के प्रदर्शन को अनुकूलित करने के लिए मेमोइज़ेशन का उपयोग करें। मेमोइज़ेशन फॉर्म घटकों के अनावश्यक री-रेंडर को रोकने में मदद कर सकता है।
• एक सुसंगत नामकरण परंपरा का उपयोग करें: फॉर्म फ़ील्ड्स और वैलिडेशन त्रुटियों के लिए एक सुसंगत नामकरण परंपरा का उपयोग करें। इससे कोड को पढ़ना और बनाए रखना आसान हो जाएगा।
• यूनिट टेस्ट लिखें: यह सुनिश्चित करने के लिए यूनिट टेस्ट लिखें कि फॉर्म सही तरीके से काम कर रहा है। यूनिट टेस्ट विकास प्रक्रिया में जल्दी त्रुटियों को पकड़ने में मदद कर सकते हैं।
• अंतर्राष्ट्रीयकरण (i18n) पर विचार करें: वैश्विक अनुप्रयोगों के लिए, सुनिश्चित करें कि आपके फॉर्म लेबल, संदेश और वैलिडेशन नियम कई भाषाओं का समर्थन करते हैं। react-intl या i18next जैसी लाइब्रेरी इसमें सहायता कर सकती हैं।

अंतर्राष्ट्रीय उदाहरण

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

• फ़ोन नंबर: विभिन्न देशों में अलग-अलग फ़ोन नंबर प्रारूप होते हैं। देश कोड के आधार पर फ़ोन नंबरों को मान्य करने के लिए libphonenumber-js जैसी लाइब्रेरी का उपयोग करें।
• पोस्टल कोड: पोस्टल कोड देशों में काफी भिन्न होते हैं। कुछ देश संख्यात्मक पोस्टल कोड का उपयोग करते हैं, जबकि अन्य अल्फान्यूमेरिक कोड का उपयोग करते हैं। वैलिडेशन लॉजिक लागू करें जो विभिन्न पोस्टल कोड प्रारूपों का समर्थन करता है।
• दिनांक प्रारूप: दिनांक प्रारूप संस्कृतियों में भिन्न होते हैं। कुछ देश MM/DD/YYYY प्रारूप का उपयोग करते हैं, जबकि अन्य DD/MM/YYYY प्रारूप का उपयोग करते हैं। उपयोगकर्ता के लोकेल के आधार पर तिथियों को प्रारूपित और पार्स करने के लिए moment.js या date-fns जैसी लाइब्रेरी का उपयोग करें।
• पता प्रारूप: पता प्रारूप भी देशों में भिन्न होते हैं। कुछ देशों को पहली पंक्ति पर सड़क का पता चाहिए, जबकि अन्य को पहली पंक्ति पर शहर और पोस्टल कोड की आवश्यकता होती है। उपयोगकर्ता के देश के आधार पर पते प्रारूपित करने के लिए एक लाइब्रेरी या एपीआई का उपयोग करें।
• मुद्रा प्रारूप: उपयोगकर्ता के लोकेल के लिए उपयुक्त प्रारूप में मुद्रा मान प्रदर्शित करें। मुद्रा मानों को प्रारूपित करने के लिए Intl.NumberFormat एपीआई का उपयोग करें।

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

useFormState के विकल्प

जबकि useFormState फॉर्म स्टेट मैनेजमेंट के लिए एक सुविधाजनक समाधान प्रदान करता है, वहीं अन्य लोकप्रिय लाइब्रेरी और दृष्टिकोण हैं जिन पर आप विचार कर सकते हैं:

• Formik: एक व्यापक रूप से उपयोग की जाने वाली लाइब्रेरी जो व्यापक फॉर्म प्रबंधन सुविधाएँ प्रदान करती है, जिसमें स्टेट मैनेजमेंट, वैलिडेशन और सबमिशन हैंडलिंग शामिल है।
• React Hook Form: एक प्रदर्शनकारी लाइब्रेरी जो री-रेंडर को कम करने और फॉर्म प्रदर्शन में सुधार करने के लिए रिएक्ट के useRef हुक का लाभ उठाती है।
• Redux Form: एक लाइब्रेरी जो फॉर्म स्टेट को प्रबंधित करने के लिए Redux के साथ एकीकृत होती है। यह एक अच्छा विकल्प है यदि आप पहले से ही अपने एप्लिकेशन में Redux का उपयोग कर रहे हैं।
• कस्टम हुक: आप फॉर्म स्टेट को प्रबंधित करने के लिए अपने स्वयं के कस्टम हुक बना सकते हैं। यह आपको सबसे अधिक लचीलापन देता है लेकिन अधिक प्रयास की आवश्यकता होती है।

निष्कर्ष

रिएक्ट का useFormState हुक फॉर्म स्टेट मैनेजमेंट को सरल बनाने के लिए एक शक्तिशाली और सुरुचिपूर्ण समाधान प्रदान करता है। स्टेट को केंद्रीकृत करके, अपडेट को सरल बनाकर, अंतर्निहित वैलिडेशन प्रदान करके, और सबमिशन स्टेट का प्रबंधन करके, useFormState आपके रिएक्ट फॉर्म के विकास के अनुभव और कोड की गुणवत्ता में काफी सुधार कर सकता है।

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