React.js . में प्रपत्रों के साथ कार्य करना

सरल html फॉर्म में, फॉर्म एलिमेंट्स आंतरिक रूप से इसके साथ मूल्य रखते हैं और फॉर्म सबमिशन बटन पर सबमिट करते हैं।

उदाहरण

<शीर्षक>प्रपत्र उदाहरण<शरीर> <रूप> <लेबल> उपयोगकर्ता नाम:<इनपुट प्रकार ="पाठ" नाम ="उपयोगकर्ता नाम" " />  <इनपुट प्रकार ="सबमिट करें" मान ="फ़ॉर्म सबमिट करें" />

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

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

रिएक्ट में फॉर्म सबमिशन को संभालने की एक तकनीक है जिसे नियंत्रित घटक कहा जाता है।

html की तरह, इनपुट, टेक्स्टरेरा आदि जैसे तत्व उपयोगकर्ता के कार्यों के आधार पर अपनी स्थिति और अपडेट रखते हैं। प्रतिक्रिया में परिवर्तनशील क्षेत्रों को राज्य वस्तु के साथ रखा जाता है।

रिएक्ट के नियंत्रित घटक के दृष्टिकोण में उपयोगकर्ता नाम फ़ील्ड को संभालना -

 क्लास यूजरफॉर्म रिएक्ट का विस्तार करता है। कॉम्पोनेंट {कंस्ट्रक्टर (प्रॉप्स) {सुपर (प्रोप); यह राज्य ={उपयोगकर्ता नाम:''}; this.handleChange =this.handleChange.bind (यह); this.handleSubmit =this.handleSubmit.bind (यह); } हैंडल चेंज (ईवेंट) {this.setState ({उपयोगकर्ता नाम:event.target.value}); } हैंडलफॉर्मसबमिट (ईवेंट) { कंसोल.लॉग ('यूजरनेम:' + this.state.username); घटना। रोकथाम डीफॉल्ट (); } प्रस्तुत करना () {वापसी (> <इनपुट प्रकार ="सबमिट" मान ="सबमिट करें" /> ); }} 

 यहां हमारे पास स्टेट फील्ड यूजरनेम को अपडेट करने के लिए ऑनचेंज हैंडलर फंक्शन है।
 

 फ़ॉर्म सबमिट पर हम सबमिट किए गए उपयोगकर्ता नाम को प्रदर्शित करने के लिए ब्राउज़र में कंसोल लॉग दिखा रहे हैं।
 

 अन्य नियंत्रित प्रकार के घटक टेक्स्ट क्षेत्र, चुनिंदा टैग, रेडियो बटन आदि हैं।
 

 फ़ाइल प्रकार जैसे कुछ अनियंत्रित घटक होते हैं जो केवल प्रकृति में पढ़े जाते हैं और केवल फॉर्म जमा करने पर ही उनका मूल्य प्राप्त होता है।
 

 सिंगल JS फंक्शन के साथ मल्टीपल फॉर्म इनपुट को हैंडल करना -
 
handleInputChange(event) { const value =event.target.value; कॉन्स्ट नाम =event.target.name; this.setState({ [नाम]:मान});}
 

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

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