रिएक्ट ट्यूटोरियल भाग 23: पहला प्रारूप पाठ

रिएक्ट ट्यूटोरियल के अनुवाद के इस भाग में, हम रूपों के साथ काम करने के बारे में बात करेंगे। विशेष रूप से, आज का पाठ घटकों और पाठ क्षेत्रों की बातचीत को व्यवस्थित करने के लिए समर्पित है।



→ भाग 1: पाठ्यक्रम अवलोकन, प्रतिक्रिया की प्रतिक्रिया के कारण, ReactDOM और JSX
→ भाग 2: कार्यात्मक घटक
→ भाग 3: घटक फाइलें, परियोजना संरचना
→ भाग 4: माता-पिता और बच्चे के घटक
→ भाग 5: एक TODO आवेदन पर काम की शुरुआत, स्टाइल की मूल बातें
→ भाग 6: पाठ्यक्रम की कुछ विशेषताओं के बारे में, जेएसएक्स और जावास्क्रिप्ट
→ भाग 7: इनलाइन शैली
→ भाग 8: TODO आवेदन पर काम जारी रखा, घटकों के गुणों से परिचित
→ भाग 9: घटक गुण
→ भाग 10: घटक गुणों और स्टाइल के साथ काम करने पर कार्यशाला
→ भाग 11: डायनेमिक मार्कअप जेनरेशन और मैप एरे विधि
→ भाग 12: कार्यशाला, एक TODO आवेदन पर काम का तीसरा चरण
→ भाग 13: वर्ग-आधारित घटक
→ भाग 14: वर्ग-आधारित घटकों, घटक स्थिति पर कार्यशाला
→ भाग 15: घटक स्वास्थ्य कार्यशालाएँ
→ भाग 16: TODO आवेदन, ईवेंट हैंडलिंग पर काम का चौथा चरण
→ भाग 17: TODO अनुप्रयोग पर काम का पांचवा चरण, घटकों की स्थिति को संशोधित करता है
→ भाग 18: TODO आवेदन पर काम का छठा चरण
→ भाग 19: घटक जीवन चक्र विधियाँ
भाग 20: सशर्त प्रतिपादन में पहला पाठ
→ भाग 21: सशर्त प्रतिपादन पर दूसरा पाठ और कार्यशाला
→ भाग 22: TODO आवेदन पर काम का सातवां चरण, बाहरी स्रोतों से डेटा डाउनलोड करना
→ भाग 23: रूपों के साथ काम करने पर पहला पाठ
→ भाग 24: दूसरा रूप पाठ
→ भाग 25: रूपों के साथ काम करने पर कार्यशाला
→ भाग 26: अनुप्रयोग वास्तुकला, कंटेनर / घटक पैटर्न
→ भाग 27: पाठ्यक्रम परियोजना

पाठ 41. रूपों के साथ काम करना, भाग 1

→ मूल

प्रपत्र वेब एप्लिकेशन का एक महत्वपूर्ण हिस्सा हैं। लेकिन, जैसा कि यह निकला, रिएक्ट के विकास में शामिल, रूपों के साथ काम करना आमतौर पर कुछ कठिनाइयों का कारण बनता है। तथ्य यह है कि रिएक्ट एक विशेष तरीके से रूपों के साथ काम करता है। इस पाठ में, हम create-react-app द्वारा बनाई गई मानक परियोजना का उपयोग करेंगे, App.js फ़ाइल का प्रारंभिक रूप जो नीचे प्रस्तुत किया गया है।

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {}   }     render() {       return (           <div>               Code goes here           </div>       )   } } export default App 

कृपया ध्यान दें कि इस पाठ की सामग्री में महारत हासिल करने के लिए, आपको एप्लिकेशन की स्थिति से परिचित होना चाहिए। यदि आपने पाठ्यक्रम के सभी पिछले पाठों और स्वतंत्र रूप से पूर्ण कार्यशालाओं के माध्यम से काम किया है, तो इसका मतलब है कि आपके पास वह ज्ञान है जिसकी आपको आवश्यकता होगी। यहाँ रूपों पर प्रतिक्रिया दस्तावेज है। यह अनुशंसा की जाती है कि आप उसे जारी रखने से पहले देखें।

इसलिए, प्रतिक्रिया में, नियमित जावास्क्रिप्ट का उपयोग करने की तुलना में फॉर्म थोड़ा अलग तरीके से काम करते हैं। सामान्य रूप से, सामान्य रूप से, वेब पेजों पर HTML का उपयोग करते हुए रूपों का वर्णन किया जाता है, जिसके बाद DOM API का उपयोग करते हुए, वे उनसे जावास्क्रिप्ट के साथ बातचीत करते हैं। विशेष रूप से, सबमिट बटन पर क्लिक करके, वे उपयोगकर्ता द्वारा भरे गए फ़ील्ड से डेटा एकत्र करते हैं और उन्हें सर्वर पर भेजने के लिए तैयार करते हैं, उनकी जाँच करते हैं, और यदि आवश्यक हो, तो उपयोगकर्ता को सूचित करते हैं कि उसने कुछ फ़ील्ड गलत तरीके से भरे। रिएक्ट में, सभी सामग्रियों को उनके सॉफ़्टवेयर प्रसंस्करण के साथ आगे बढ़ने से पहले फॉर्म फ़ील्ड में दर्ज किए जाने की प्रतीक्षा करने के बजाय, एप्लिकेशन की स्थिति का उपयोग करके डेटा की लगातार निगरानी की जाती है। यह, उदाहरण के लिए, इस तथ्य पर उबलता है कि कीबोर्ड से उपयोगकर्ता द्वारा दर्ज किया गया प्रत्येक चरित्र तुरंत राज्य में प्रवेश करता है। नतीजतन, रिएक्ट एप्लिकेशन में हम जल्दी से नवीनतम संस्करण के साथ काम कर सकते हैं जो उपयोगकर्ता फॉर्म फ़ील्ड में प्रवेश करता है। कार्रवाई में इस विचार को प्रदर्शित करने के लिए, हम एक नियमित पाठ फ़ील्ड वाले फ़ॉर्म के विवरण से शुरू करते हैं।

ऐसा करने के लिए, कोड में जो render() विधि रिटर्न करती है, हम फॉर्म का वर्णन करते हैं। सामान्य दृष्टिकोण में, ऐसे फॉर्म में एक बटन होता है, जिस पर क्लिक करके एप्लिकेशन के प्रोग्राम तंत्र इस फॉर्म में दर्ज किए गए डेटा को संसाधित करना शुरू करते हैं। हमारे मामले में, क्षेत्र में उपयोगकर्ता द्वारा दर्ज किया गया डेटा जैसे ही वे दर्ज करेंगे, आवेदन पर जाएंगे। ऐसा करने के लिए, हमें onChange फील्ड फ़ील्ड onChange को हैंडल करना होगा। इस ईवेंट के हैंडलर में (इसे कॉल handleChange() ) हम स्टेट को अपडेट करके लिखेंगे कि क्या फील्ड में दर्ज किया गया है। ऐसा करने के लिए, सबसे पहले, हमें यह पता लगाने की जरूरत है कि क्षेत्र में क्या निहित है, और दूसरी बात, इस डेटा को एक राज्य में रखना। राज्य में, एक संपत्ति बनाएं जो क्षेत्र की सामग्री को संग्रहीत करता है। हम उपयोगकर्ता के पहले नाम को संग्रहीत करने के लिए इस क्षेत्र का उपयोग करने जा रहे हैं, इसलिए हम संबंधित संपत्ति को पहले नाम देंगे और इसे खाली स्ट्रिंग के साथ आरंभ करेंगे।

उसके बाद, कंस्ट्रक्टर में, हम handleChange() ईवेंट हैंडलर को handleChange() संलग्न करते हैं और हैंडलर कोड में हम setState() फ़ंक्शन का उपयोग करते हैं। चूँकि पिछला मान जो पहले firstName राज्य संपत्ति में संग्रहीत किया गया था, वह हमारे लिए कोई दिलचस्पी नहीं है, हम केवल इस फ़ंक्शन के लिए नए firstName मान के साथ कोई ऑब्जेक्ट पास कर सकते हैं। इस संपत्ति को क्या लिखा जाना चाहिए?

यदि आपको याद है कि जावास्क्रिप्ट में ईवेंट हैंडलर कैसे काम करते हैं, तो यह पता चलता है कि जब उन्हें बुलाया जाता है, तो वे कुछ पूर्वनिर्धारित मापदंडों को पारित करते हैं। हमारे मामले में, ईवेंट ऑब्जेक्ट हैंडलर को दिया जाता है। इसमें वह डेटा होता है जो हमें रुचता है। वह टेक्स्ट फ़ील्ड जिसका onChange इवेंट हम प्रोसेस कर रहे हैं, इस ऑब्जेक्ट में event.target रूप में event.target । और इस क्षेत्र की सामग्री को event.target.value निर्माण का उपयोग करके एक्सेस किया जा सकता है।

अब, render() विधि में, हम आउटपुट करेंगे जो राज्य में संग्रहीत किया जाएगा और जो हमें मिला है उसे देखें।

यहाँ कोड है जो उपरोक्त विचारों को लागू करता है।

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           firstName: ""       }       this.handleChange = this.handleChange.bind(this)   }     handleChange(event) {       this.setState({           firstName: event.target.value       })   }     render() {       return (           <form>               <input type="text" placeholder="First Name" onChange={this.handleChange} />               <h1>{this.state.firstName}</h1>           </form>       )   } } export default App 

यह सब ब्राउज़र में कैसे दिखता है।


ब्राउज़र में एप्लिकेशन पेज

फ़ील्ड में दर्ज किया गया प्रत्येक वर्ण पृष्ठ पर मौजूद <h1> तत्व में तुरंत दिखाई देता है।

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

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

एक ही घटना हैंडलर में फ़ील्ड्स को अलग करने के लिए जब इसे बदल दिया जाता है, तो हम फ़ील्ड को name गुण निर्दिष्ट करेंगे, जिसे हम ठीक उसी तरह बनाएंगे जैसे कि राज्य में फ़ील्ड डेटा को संग्रहीत करने के लिए उपयोग किए जाने वाले गुणों के नाम (पहले firstName और अंतिम firstName )। उसके बाद, हम हैंडलर को पारित किए गए ईवेंट ऑब्जेक्ट के साथ काम कर सकते हैं, फ़ील्ड का नाम पता कर सकते हैं, जिसमें परिवर्तन हुए हैं और इसके नाम का उपयोग किया गया है। हम उस राज्य संपत्ति का नाम सेट करके उसका उपयोग करेंगे जिसमें हम अद्यतन डेटा जोड़ना चाहते हैं। यहाँ कोड है कि इस सुविधा को लागू करता है:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           firstName: "",           lastName: ""       }       this.handleChange = this.handleChange.bind(this)   }     handleChange(event) {       this.setState({           [event.target.name]: event.target.value       })   }     render() {       return (           <form>               <input type="text" name="firstName" placeholder="First Name" onChange={this.handleChange} />               <br />               <input type="text" name="lastName" placeholder="Last Name" onChange={this.handleChange} />               <h1>{this.state.firstName} {this.state.lastName}</h1>           </form>       )   } } export default App 

ध्यान दें कि setState() पास की गई वस्तु का गुण नाम सेट करके, हम आयताकार कोष्ठक में event.target.name निर्माण को setState() हैं।


ब्राउज़र में एप्लिकेशन पेज

पृष्ठ अब प्रदर्शित करता है कि पहले फ़ील्ड में क्या दर्ज किया गया है और दूसरे फ़ील्ड में क्या दर्ज किया गया है।

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

हम अगले पाठ में अन्य फार्म तत्वों के साथ काम करने के बारे में बात करेंगे। यहां हम एक अन्य विषय पर बात करेंगे जो तथाकथित "नियंत्रित घटक" से संबंधित है, जिसके बारे में आप, यदि आपने प्रपत्रों पर प्रतिक्रिया दस्तावेज को देखा है, तो पहले से ही कुछ पढ़ चुके हैं।

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

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           firstName: "",           lastName: ""       }       this.handleChange = this.handleChange.bind(this)   }     handleChange(event) {       this.setState({           [event.target.name]: event.target.value       })   }     render() {       return (           <form>               <input                   type="text"                   value={this.state.firstName}                   name="firstName"                   placeholder="First Name"                   onChange={this.handleChange}               />               <br />               <input                   type="text"                   value={this.state.lastName}                   name="lastName"                   placeholder="Last Name"                   onChange={this.handleChange}               />               <h1>{this.state.firstName} {this.state.lastName}</h1>           </form>       )   } } export default App 

इन परिवर्तनों के बाद, एप्लिकेशन पहले की तरह ही काम करता है। इसके पिछले संस्करण से मुख्य अंतर यह है कि यह क्षेत्र राज्य में संग्रहित की गई चीज़ों को प्रदर्शित करता है।

मैं एक सलाह देना चाहता हूं जो आपको भविष्य में उन त्रुटियों से बचाएगा जो डिबग करना बहुत मुश्किल है। यहाँ क्या है onChange इवेंट हैंडलर कोड अब जैसा दिखता है:

 handleChange(event) {   this.setState({       [event.target.name]: event.target.value   }) } 

यह अनुशंसा की जाती है कि setState() को पास की गई वस्तु का निर्माण करते समय event वस्तु के गुणों को सीधे एक्सेस करने के बजाय, अग्रिम में आपको इसकी क्या आवश्यकता है:

 handleChange(event) {   const {name, value} = event.target   this.setState({       [name]: value   }) } 

यहां हम उन त्रुटियों के बारे में विवरणों में नहीं जाएंगे जिन्हें इस तरह से घटना संचालकों के निर्माण से बचा जा सकता है। यदि आप रुचि रखते हैं, तो प्रतिक्रिया दस्तावेज़ में SyntheticEvent देखें ।

परिणाम

इस पाठ में, आप पहली बार प्रतिक्रिया में रूपों के साथ काम करने के लिए तंत्र से परिचित हुए। अगली बार हम इस विषय को जारी रखेंगे।

प्रिय पाठकों! प्रतिक्रिया में रूपों के साथ काम करते समय क्या आप किसी अतिरिक्त पुस्तकालय का उपयोग करते हैं?