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

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

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

एक प्रतिक्रिया ऐप बनाएं

बनाने-प्रतिक्रिया-ऐप का उपयोग करें एक नया रिएक्ट प्रोजेक्ट बनाएं:

एनपीएक्स क्रिएट-रिएक्शन-ऐप फॉर्मिक-फॉर्म

अब, पर नेविगेट करें फॉर्मिक-फॉर्म / src फ़ोल्डर को छोड़कर सभी फाइलों को हटा दें ऐप.जेएस.

इसके बाद, एक नई फाइल बनाएं और उसे नाम दें रजिस्टर.जेएस. यह वह जगह है जहाँ आप अपना फॉर्म जोड़ेंगे। इसे आयात करना याद रखें ऐप.जेएस.

एक प्रतिक्रिया प्रपत्र बनाएँ

आप नियंत्रित घटकों या अनियंत्रित घटकों का उपयोग करके रिएक्ट फॉर्म बना सकते हैं। एक नियंत्रित घटक वह है जिसका फॉर्म डेटा रिएक्ट द्वारा ही नियंत्रित किया जाता है। एक अनियंत्रित घटक वह है जिसका प्रपत्र डेटा DOM द्वारा नियंत्रित किया जाता है।

आधिकारिक प्रतिक्रिया डॉक्स नियंत्रित घटकों का उपयोग करने की सलाह देते हैं। वे आपको स्थानीय राज्य में प्रपत्र डेटा का ट्रैक रखने देते हैं और इसलिए प्रपत्र का पूर्ण नियंत्रण रखते हैं।

नीचे नियंत्रित घटक का उपयोग करके बनाए गए प्रपत्र का एक उदाहरण है।

"प्रतिक्रिया" से आयात {useState};
कॉन्स्ट रजिस्टर = () => {
 कॉन्स्ट [ईमेल, सेटमेल] = यूज़स्टेट ("");
 कॉन्स्ट [पासवर्ड, सेटपासवर्ड] = यूज़स्टेट ("");
 कॉन्स्ट हैंडलसबमिट = (घटना) => {
 घटना। रोकथाम डीफॉल्ट ();
 कंसोल.लॉग (ईमेल);
 };
 कॉन्स्ट हैंडल ईमेल = (घटना) => {
 सेटमेल (event.target.value);
 };
 कॉन्स्ट हैंडलपासवर्ड = (घटना) => {
 सेटपासवर्ड (event.target.value);
 };
 वापसी (


 आईडी = "ईमेल"
 नाम = "ईमेल"
 टाइप = "ईमेल"
 प्लेसहोल्डर = "आपका ईमेल"
 मूल्य = {ईमेल}
 ऑन चेंज = {हैंडल ईमेल}
 />
 आईडी = "पासवर्ड"
 नाम = "पासवर्ड"
 टाइप = "पासवर्ड"
 प्लेसहोल्डर = "आपका पासवर्ड"
 मूल्य = {पासवर्ड}
 ऑन चेंज = {हैंडलपासवर्ड}
 />




 );
};
निर्यात डिफ़ॉल्ट रजिस्टर;

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

फॉर्मिक इन समस्याओं को कम करना है। यह फॉर्म स्थिति को संभालना, फॉर्म डेटा को मान्य और सबमिट करना आसान बनाता है।

प्रतिक्रिया में फॉर्मिक जोड़ें

उपयोग करने से पहले फॉर्मिक, इसे अपने प्रोजेक्ट में उपयोग करके जोड़ें NPM.

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

फॉर्मिक को एकीकृत करने के लिए, आप का उपयोग करेंगे फॉर्मिक का उपयोग करें अंकुश। में रजिस्टर.जेएस, फ़ाइल के शीर्ष पर useFormik आयात करें:

आयात { useFormik } "formik" से

पहला कदम फॉर्म वैल्यू को इनिशियलाइज़ करना है। इस मामले में, आप ईमेल और पासवर्ड को इनिशियलाइज़ करेंगे।

कॉन्स्ट फॉर्मिक = यूजफॉर्मिक ({
 प्रारंभिक मान: {
 ईमेल: "",
 पासवर्ड: "",
 },
 सबमिट करें: मान => {
// फॉर्म सबमिशन को हैंडल करें
 },
});

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

अगला कदम का उपयोग करना है फॉर्मिक राज्य के अंदर और बाहर फॉर्म मान प्राप्त करने के लिए ऑब्जेक्ट।

 आईडी = "ईमेल"
 नाम = "ईमेल"
 टाइप = "ईमेल"
 प्लेसहोल्डर = "आपका ईमेल"
 मूल्य = {formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 आईडी = "पासवर्ड"
 नाम = "पासवर्ड"
 टाइप = "पासवर्ड"
 प्लेसहोल्डर = "आपका पासवर्ड"
 मूल्य = {formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />

उपरोक्त कोड में, आप हैं:

• इनपुट फ़ील्ड देना a पहचान और नाम में आरंभीकरण के दौरान उपयोग किए गए मान के बराबर फॉर्मिक का उपयोग करें अंकुश।
• किसी फ़ील्ड के मान को एक्सेस करना, उसके नाम का उपयोग करके इसे पुनः प्राप्त करना फॉर्मिक.वैल्यूज़.
• बाइंडिंग फॉर्मिक.हैंडलचेंज उपयोगकर्ता प्रकार के रूप में इनपुट मान प्रदर्शित करने के लिए ऑन चेंज ईवेंट में।
• का उपयोग करते हुए फॉर्मिक.हैंडलब्लर विज़िट किए गए फ़ील्ड का ट्रैक रखने के लिए।
• बाइंडिंग फॉर्मिक.हैंडलसबमिट करें को ऑनसबमिट घटना को ट्रिगर करने के लिए ऑनसबमिट फ़ंक्शन जिसे आपने जोड़ा है फॉर्मिक का उपयोग करें अंकुश।

फॉर्म सत्यापन सक्षम करें

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

प्रपत्र को मान्य करने के लिए, एक सत्यापन फ़ंक्शन को परिभाषित करें जो प्रपत्र मानों को स्वीकार करता है और एक त्रुटि ऑब्जेक्ट देता है।

यदि आप सत्यापन फ़ंक्शन को इसमें जोड़ते हैं फॉर्मिक का उपयोग करें, कोई भी सत्यापन त्रुटि पाई गई में उपलब्ध होगी फॉर्मिक.त्रुटियां, इनपुट नाम पर अनुक्रमित। उदाहरण के लिए, आप ईमेल फ़ील्ड के बारे में त्रुटि का उपयोग कर सकते हैं Formik.errors.email.

में रजिस्टर.जेएस, बनाएँ सत्यापित करें कार्य करें और इसे शामिल करें फॉर्मिक का उपयोग करें.

कॉन्स्ट फॉर्मिक = यूजफॉर्मिक ({
 प्रारंभिक मान: {
 ईमेल: "",
 पासवर्ड: "",
 },
 मान्य करें: () => {
 स्थिरांक त्रुटियाँ = {};
 कंसोल.लॉग (त्रुटियां)
 अगर (!formik.values.email) {
 error.email = "आवश्यक";
 } और अगर (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test (formik.values.email)
 ) {
 error.email = "अमान्य ईमेल पता";
 }
 अगर (!formik.values.password) {
 error.password = "आवश्यक";
 } और अगर (formik.values.password.length < 8) {
 error.password = "आठ वर्ण या अधिक का होना चाहिए";
 }
 वापसी त्रुटियां;
 },
 सबमिट करें: (मान) => {
 कंसोल.लॉग ("सबमिट किया गया!");
 // सबमिशन को हैंडल करें
 },
});

त्रुटि प्रबंधन जोड़ें

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

 आईडी = "ईमेल"
 नाम = "ईमेल"
 टाइप = "ईमेल"
 प्लेसहोल्डर = "आपका ईमेल"
 मूल्य = {formik.values.email}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.email && formik.errors.email? 
{formik.errors.email}
: व्यर्थ}
 आईडी = "पासवर्ड"
 नाम = "पासवर्ड"
 टाइप = "पासवर्ड"
 प्लेसहोल्डर = "आपका पासवर्ड"
 मूल्य = {formik.values.password}
 onChange={formik.handleChange}
 onBlur={formik.handleBlur}
 />
 {formik.touched.password && formik.errors.password? 
{formik.errors.password}
: व्यर्थ}

Yup का उपयोग करके डेटा मान्य करें

फॉर्मिक का उपयोग करके फॉर्म को मान्य करने का एक आसान तरीका प्रदान करता है हां पुस्तकालय। आरंभ करने के लिए yup स्थापित करें।

npm हाँ स्थापित करें

आयात हां में रजिस्टर.जेएस.

आयात * "yup" से हाँ के रूप में

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

कॉन्स्ट फॉर्मिक = यूजफॉर्मिक ({
 प्रारंभिक मान: {
 ईमेल: "",
 पासवर्ड: "",
 },
 सत्यापन स्कीमा: Yup.object ()। आकार ({
 ईमेल: हाँ.स्ट्रिंग ()
 ईमेल ("अमान्य ईमेल पता")
 आवश्यक ("आवश्यक"),
 पासवर्ड: हाँ.स्ट्रिंग ()
 .min (8, "8 वर्ण या अधिक होना चाहिए")
 आवश्यक ("आवश्यक")
 }),
 सबमिट करें: (मान) => {
 कंसोल.लॉग ("सबमिट किया गया!");
// सबमिशन को हैंडल करें
 },
});

और बस! आपने फॉर्मिक और यूप का उपयोग करके एक सरल पंजीकरण फॉर्म बनाया है।

सब कुछ लपेटना

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

10 प्रतिक्रियात्मक सर्वोत्तम अभ्यास जिन्हें आपको 2022 में पालन करने की आवश्यकता है

आगे पढ़िए

लेखक के बारे में