रिएक्ट हुक फॉर्म का उपयोग करके रिएक्ट में फॉर्म कैसे बनाएं

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

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

रिएक्ट हुक फॉर्म इंस्टॉल करना

रिएक्ट हुक फॉर्म का उपयोग शुरू करने के लिए, आपको इसे एनपीएम या यार्न पैकेज मैनेजर का उपयोग करके इंस्टॉल करना होगा।

एनपीएम का उपयोग करके रिएक्ट हुक फॉर्म को स्थापित करने के लिए, अपने टर्मिनल में निम्नलिखित कमांड चलाएँ:

एनपीएम प्रतिक्रिया-हुक-फॉर्म स्थापित करें

यार्न का उपयोग करके रिएक्ट हुक फॉर्म को स्थापित करने के लिए, निम्नलिखित कमांड चलाएँ:

यार्न रिएक्ट-हुक-फॉर्म जोड़ें

रिएक्ट हुक फॉर्म का उपयोग करके एक फॉर्म बनाना

रिएक्ट हुक फॉर्म का उपयोग करके एक फॉर्म बनाने के लिए, आपको इसका उपयोग करना होगा

useForm अंकुश। useForm हुक आपको उन विधियों और गुणों तक पहुँच प्रदान करता है जिनका आप उपयोग करेंगे अपने रिएक्ट एप्लिकेशन में अपने फॉर्म बनाएं और प्रबंधित करें.

यहाँ एक उदाहरण दिखाया गया है कि कैसे उपयोग करना है useForm अंकुश:

आयात प्रतिक्रिया से'प्रतिक्रिया'
आयात {यूज़फॉर्म} से'प्रतिक्रिया-हुक-रूप';
समारोहप्रपत्र() {
कॉन्स्ट {रजिस्टर, हैंडल सबमिट करें} = उपयोगफॉर्म ();
कॉन्स्ट ऑनसबमिट = (आंकड़े) =>सांत्वना देनालॉग (डेटा);
वापस करना (



'मूलपाठ' { ...पंजीकरण करवाना("पहला नाम")} />
जमा करें </button>
 </form>
 )
}
निर्यातगलती करना प्रपत्र;

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

उपरोक्त कोड ब्लॉक में, आप 'firstname' नाम से एक इनपुट दर्ज करते हैं हैंडल सबमिट करें रिएक्ट हुक फॉर्म लाइब्रेरी की विधि फॉर्म जमा करने को संभालती है।

फॉर्म सबमिशन को संभालने के लिए, आप कॉलबैक फ़ंक्शन पास करेंगे ऑनसबमिट तक हैंडल सबमिट करें तरीका। ऑनसबमिट फ़ंक्शन एक ऑब्जेक्ट प्राप्त करेगा जिसमें सभी फॉर्म इनपुट के मान होंगे।

रजिस्टर विधि के साथ इनपुट मान्य करें

पंजीकरण करवाना विधि आपको अपने इनपुट फ़ील्ड के लिए सत्यापन नियम स्थापित करने की अनुमति देती है। अपने इनपुट फ़ील्ड में सत्यापन जोड़ने के लिए, आप सत्यापन नियमों के साथ ऑब्जेक्ट को दूसरे तर्क के रूप में पास करते हैं पंजीकरण करवाना तरीका।

जैसे इतना:

आयात प्रतिक्रिया से'प्रतिक्रिया'
आयात {यूज़फॉर्म} से'प्रतिक्रिया-हुक-रूप';
समारोहप्रपत्र() {
कॉन्स्ट{रजिस्टर, हैंडल सबमिट करें} = उपयोगफॉर्म ();
कॉन्स्ट ऑनसबमिट = (आंकड़े) =>सांत्वना देनालॉग (डेटा);
वापस करना (



'मूलपाठ' { ...पंजीकरण करवाना("पहला नाम", { आवश्यक: सत्य})} />
'पासवर्ड' { ...पंजीकरण करवाना("पासवर्ड", { आवश्यक: सत्य, अधिकतम लंबाई: 10})}/>
जमा करें </button>
 </form>
 )
}
निर्यातगलती करना प्रपत्र;

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

अधिकतम लंबाई नियम इनपुट मान की वर्णानुक्रमिक अक्षरों की अधिकतम संख्या सेट करता है। इसके अलावा आवश्यक और अधिकतम लंबाई विधियाँ, आप अन्य सत्यापन नियम जोड़ सकते हैं, जैसे मिन, अधिकतम, न्यूनतम लंबाई, नमूना, और मान्य.

न्यूनतम अधिकतम

मिन नियम इनपुट फ़ील्ड के लिए न्यूनतम मान निर्दिष्ट करता है और अधिकतम नियम इसका अधिकतम मूल्य निर्दिष्ट करता है।

आप उपयोग कर सकते हैं मिन और अधिकतम संख्या-प्रकार के इनपुट वाले नियम, जैसे:

'संख्या' { ...पंजीकरण करवाना("आयु", {मिन: 18, अधिकतम: 35}) } />

उपरोक्त इनपुट फ़ील्ड का मान कम से कम 18 और 35 से अधिक नहीं होना चाहिए।

न्यूनतम लंबाई

न्यूनतम लंबाई नियम के समान है अधिकतम लंबाई नियम लेकिन इसके बजाय वर्णानुक्रमिक अक्षरों की न्यूनतम संख्या निर्धारित करता है:

'मूलपाठ' { ...पंजीकरण करवाना("नाम", { न्यूनतम लंबाई: 10 })}/>

इस उदाहरण में, न्यूनतम लम्बाई नियम निर्दिष्ट करता है कि इनपुट का मान कम से कम 10 वर्ण लंबा होना चाहिए।

पैटर्न और मान्य करें

नमूना नियम एक नियमित अभिव्यक्ति पैटर्न निर्दिष्ट करता है जो इनपुट मान से मेल खाना चाहिए। मान्य नियम आपको इनपुट मान को सत्यापित करने के लिए कस्टम सत्यापन फ़ंक्शन को परिभाषित करने की अनुमति देता है। समारोह या तो वापस आना चाहिए सत्य या एक स्ट्रिंग त्रुटि संदेश।

उदाहरण के लिए:

'मूलपाठ' { ...पंजीकरण करवाना("पहला नाम", {नमूना: **/^[A-Za-z]+$/**}) } />
'संख्या' { ...पंजीकरण करवाना("परीक्षा", {**सत्यापित करें: (कीमत) => मूल्य <= 12** }) } />

इस उदाहरण में, "फर्स्टनाम" इनपुट का उपयोग करता है नमूना नियम। नमूना यह आवश्यक है कि इनपुट मान में केवल वर्णानुक्रमिक वर्ण (अपरकेस और लोअरकेस) हों।

"परीक्षण" इनपुट का उपयोग करता है मान्य कस्टम सत्यापन फ़ंक्शन को परिभाषित करने के लिए नियम जो जांचता है कि इसका मान 12 से कम या उसके बराबर है या नहीं।

अपने फॉर्म में त्रुटियों को संभालना

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

हालाँकि, यदि कोई सत्यापन त्रुटियाँ होती हैं, तो वादा एक त्रुटि ऑब्जेक्ट के साथ अस्वीकार कर दिया जाता है जिसमें सत्यापन त्रुटियाँ होती हैं।

का उपयोग करके त्रुटियों को कैसे प्रबंधित करें, इसका एक उदाहरण यहां दिया गया है हैंडल सबमिट करें समारोह:

आयात प्रतिक्रिया से'प्रतिक्रिया'
आयात {यूज़फॉर्म} से'प्रतिक्रिया-हुक-रूप';
समारोहप्रपत्र() {
कॉन्स्ट {रजिस्टर, हैंडल सबमिट करें, formState: {त्रुटियां}} = useForm ();
कॉन्स्ट ऑनसबमिट = (आंकड़े) =>सांत्वना देनालॉग (डेटा); 
वापस करना (



'मूलपाठ' { ...पंजीकरण करवाना("पहला नाम", { आवश्यक: सत्य})} />
 {errors.firstname && <अवधि>कृपया अपना पहला नाम डालेंअवधि>}
'संख्या' { ...पंजीकरण करवाना("आयु", {मिन: 18, अधिकतम: 35,}) } />
 {त्रुटियां.उम्र?.प्रकार 'अधिकतम' && <अवधि> आप इस साइट के लिए बहुत पुराने हैंअवधि>}
 {त्रुटियां.उम्र?.प्रकार 'मिनट' && <अवधि> आप इस साइट के लिए बहुत छोटे हैंअवधि>}
जमा करें </button>
 </form>
 )
}
निर्यातगलती करना प्रपत्र;

इस कोड ब्लॉक में, formState ऑब्जेक्ट प्रत्येक फ़ील्ड की त्रुटियों तक पहुंच प्राप्त करता है। त्रुटियाँ ऑब्जेक्ट प्रत्येक इनपुट फ़ील्ड के लिए सत्यापन त्रुटियों को संग्रहीत करता है। त्रुटियाँ ऑब्जेक्ट सशर्त रूप से प्रत्येक अमान्य फ़ील्ड के लिए एक त्रुटि संदेश प्रस्तुत करता है।

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

यदि मान 18 से कम है, तो त्रुटि संदेश "आप इस साइट के लिए बहुत छोटे हैं" होगा और यदि मान 35 से अधिक है, तो त्रुटि संदेश "आप इस साइट के लिए बहुत पुराने हैं" होगा।

अब आप रिएक्ट में विश्वसनीय फॉर्म बना सकते हैं

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

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