रिएक्ट ट्यूटोरियल भाग 24: दूसरा रूप पाठ

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



→ भाग 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: पाठ्यक्रम परियोजना

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

→ मूल

इस पाठ में, हम बहु-पंक्ति पाठ में प्रवेश करने के लिए, झंडे के बारे में, रेडियो बटन के बारे में (उन्हें "रेडियो बटन" भी कहा जाता है), और सूची क्षेत्रों के बारे में बात करेंगे। आज तक, हमने केवल साधारण पाठ इनपुट फ़ील्ड के साथ काम करने पर विचार किया है।
यहाँ App घटक के लिए कोड है जिसे हम आज के प्रयोगों के साथ शुरू करेंगे:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           firstName: "",           lastName: ""       }       this.handleChange = this.handleChange.bind(this)   }     handleChange(event) {       const {name, value} = event.target       this.setState({           [name]: 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}               />                             {                   /**                    *    :                    *                    * <textarea />                    * <input type="checkbox" />                    * <input type="radio" />                    * <select>  <option>                    */               }                             <h1>{this.state.firstName} {this.state.lastName}</h1>           </form>       )   } } export default App 

यह काम के चरण में ब्राउज़र में एप्लिकेशन पेज जैसा दिखता है।


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

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

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

 <br /> <textarea></textarea> 

यदि आप अब एप्लिकेशन पृष्ठ को देखते हैं, तो आप देख सकते हैं कि उस पर मल्टी-लाइन टेक्स्ट दर्ज करने का क्षेत्र कैसे दिखाई देता है।


पृष्ठ पर पाठ दर्ज करने के लिए फ़ील्ड

जैसा कि आप देख सकते हैं, यह क्षेत्र सामान्य क्षेत्रों की तुलना में थोड़ा अधिक है, उपयोगकर्ता अपने निचले सही में मार्कर का उपयोग करके इसका आकार बदल सकता है। rows और cols के लिए धन्यवाद cols आप इस तत्व का वर्णन करते समय इसके आयाम निर्दिष्ट कर सकते हैं। सामान्य HTML में, यदि आप फ़ील्ड प्रदर्शित होने के बाद उसमें कुछ पाठ रखना चाहते हैं, तो यह तत्व के उद्घाटन और समापन टैग के बीच वांछित पाठ दर्ज करके किया जाता है। प्रतिक्रिया में, ऐसे तत्वों के साथ काम करना input तत्वों के साथ काम करने के समान संभव है, जो हमने पिछली बार के बारे में बात की थी। अर्थात्, रिएक्ट में, textarea टैग स्व-समापन है। अर्थात्, पृष्ठ पर फ़ील्ड प्रदर्शित करने के लिए कोड निम्नानुसार बदला जा सकता है:

 <textarea /> 

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

 <textarea value={"Some default value"}/> 

यह निर्दिष्ट पाठ को पृष्ठ पर प्रदर्शित होने पर फ़ील्ड में दिखाई देगा।


क्षेत्र में दिखाई देने वाला पाठ

हम बहु-पंक्ति पाठ में प्रवेश करने के लिए क्षेत्र के साथ काम पर लौट आएंगे, लेकिन अब हम झंडे के बारे में बात करेंगे। एक चेक बॉक्स एक input नियंत्रण है जिसका प्रकार checkbox । यहाँ उसका वर्णन है:

 <input type="checkbox" /> 

यहाँ इस मार्कअप द्वारा वर्णित ध्वज पेज पर कैसा दिखता है।


चेक बॉक्स

इस नियंत्रण की मुख्य विशेषता यह है कि इसके साथ काम करते समय value विशेषता का उपयोग नहीं किया जाता है। इसका उपयोग उपयोगकर्ता को कुछ दो विकल्पों के विकल्प प्रदान करने के लिए किया जाता है, जिनमें से एक चेक बॉक्स से मेल खाता है, और दूसरा अनियंत्रित से। यह जांचने के लिए कि चेकबॉक्स चेक किया गया है या अनियंत्रित है, checked की checked विशेषता का उपयोग किया जाता है, जिसे तार्किक मान द्वारा वर्णित किया गया है। नतीजतन, झंडे आमतौर पर राज्य में संग्रहीत तार्किक गुणों के अनुरूप होते हैं।

आइए घटक की स्थिति को इस रूप में लाएं:

 this.state = {   firstName: "",   lastName: "",   isFriendly: true } 

ध्वज विवरण कोड निम्नानुसार बदला गया है:

 <input   type="checkbox"   checked={this.state.isFriendly} /> 

उसके बाद, चयनित चेकबॉक्स पृष्ठ पर प्रदर्शित किया जाएगा।


चेक बॉक्स

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


सांत्वना चेतावनी

हम झंडे के साथ काम करने के लिए एक विशेष विधि लिख सकते हैं, लेकिन हमारे घटक के कोड में पहले से ही handleChange() विधि है। अब इसका उपयोग टेक्स्ट फ़ील्ड के साथ काम करने के लिए किया जाता है। हम ध्वज के साथ काम करने के लिए इसका उपयोग करने के बारे में सोचेंगे। ऐसा करने के लिए, पहले ऊपर की विधि को ध्वज के onChange ईवेंट onChange रूप में असाइन करें और ध्वज को एक नाम असाइन करें जो ध्वज से संबंधित राज्य संपत्ति के नाम से मेल खाता है। इसके अलावा, हम label टैग का उपयोग करके ध्वज पर हस्ताक्षर करेंगे:

 <label>    <input       type="checkbox"       name="isFriendly"       checked={this.state.isFriendly}       onChange={this.handleChange}   /> Is friendly? </label> 

handleChange() विधि में, जिसका कोड नीचे दिखाया गया है, जब टेक्स्ट फ़ील्ड के साथ काम करते हुए, हमने तत्व ( name ) और उसकी सामग्री ( value ) का नाम पता किया, जिसके बाद हमने यह लिखकर राज्य को अपडेट किया कि एक निश्चित नाम के साथ क्या फ़ील्ड है इसकी value विशेषता:

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

अब हमें यह पता लगाने की जरूरत है कि उस झंडे से कैसे निपटें जिसका कोई value विशेषता नहीं है। इसमें केवल checked की checked विशेषता है, जो केवल true या false मूल्यों को स्वीकार कर सकती है। नतीजतन, एक झंडे के साथ काम करने के लिए handleChange() पद्धति का उपयोग करने के लिए, हमें यह जांचने की आवश्यकता है कि जिस तत्व के लिए यह हैंडलर कहा जाता है वह ध्वज है या नहीं। इस चेक को करने के लिए, हम याद करते हैं कि ध्वज का प्रतिनिधित्व करने वाले input तत्व का प्रकार ( type ) checkbox सेट है। इस मान की जाँच करने के लिए, आप event.target तत्व की type गुण को संदर्भित कर सकते हैं। हम निम्नलिखित निर्माण का उपयोग करके इस संपत्ति को event.target , साथ ही checked गई संपत्ति से event.target :

 const {name, value, type, checked} = event.target 

अब हम type के मान की जांच कर सकते हैं और पता लगा सकते हैं कि ईवेंट हैंडलर को किस तत्व के लिए कहा गया है। यदि यह मामला है, तो हम राज्य में लिखेंगे कि checked कंटिन्यू में क्या निकला। टेक्स्ट फ़ील्ड के साथ काम करने के लिए ज़िम्मेदार कोड को सहेजना न भूलें। परिणामस्वरूप, handleChange() कोड निम्नलिखित रूप लेता है:

 handleChange(event) {   const {name, value, type, checked} = event.target   type === "checkbox" ? this.setState({ [name]: checked }) : this.setState({ [name]: value }) } 

उसके बाद, ध्वज के संचालन की जांच करें।


ध्वज के संचालन की जाँच करना

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

 <textarea   value={"Some default value"}   onChange={this.handleChange} /> 

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

उन्हें text और checkbox प्रकारों के input तत्वों के संयोजन के रूप में दर्शाया जा सकता है। यहाँ क्या मतलब है कि स्विच में एक value विशेषता और एक checked विशेषता दोनों है। ध्वज विवरण कोड के आधार पर अपना कोड बनाते हुए, हमारे फ़ॉर्म में कुछ जोड़े। यहाँ यह कैसा दिखता है:

 <label>   <input       type="radio"       name="gender"       value="male"       checked={this.state.isFriendly}       onChange={this.handleChange}   /> Male </label> <br /> <label>   <input       type="radio"       name="gender"       value="female"       checked={this.state.isFriendly}       onChange={this.handleChange}   /> Female </label> 

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

स्विचेस को कॉन्फ़िगर करते समय, आप बस यह संकेत नहीं दे सकते कि उनका checked मान सेट है, कहो तो true अगर कुछ राज्य संपत्ति true । स्विचेस को समूह के भीतर, अपने स्वयं के राज्य में परिवर्तन के साथ सिंक्रनाइज़ का समर्थन करना चाहिए। इसके बजाय, स्विचेस का checked मान शर्त द्वारा सेट किया गया है। हमारे मामले में, इस स्थिति को स्ट्रिंग male या female साथ इस this.state.gender की राज्य संपत्ति की तुलना करके दर्शाया जाएगा। स्विच विवरण कोड में, यह इस तरह दिखता है:

 <label>   <input       type="radio"       name="gender"       value="male"       checked={this.state.gender === "male"}       onChange={this.handleChange}   /> Male </label> <br /> <label>   <input       type="radio"       name="gender"       value="female"       checked={this.state.gender === "female"}       onChange={this.handleChange}   /> Female </label> 

अब एक नई संपत्ति, gender , राज्य में जोड़ें, इसे एक रिक्त स्ट्रिंग के साथ आरम्भ करते हुए:

 this.state = {   firstName: "",   lastName: "",   isFriendly: false,   gender: "" } 

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

 <h2><font color="#3AC1EF">You are a {this.state.gender}</font></h2> 

यहाँ, शायद, यह सशर्त प्रतिपादन के कुछ तंत्र को शुरू करने के लायक है। यह तब अनुमति देगा, जब पृष्ठ को खोलने पर, जब कोई भी रेडियो बटन चयनित न हो, यह सुनिश्चित करने के लिए कि You are a जिस पाठ पर हैं, वह उस पर प्रदर्शित नहीं है, लेकिन हम ऐसा नहीं करेंगे, हालांकि आप इसे पूरी तरह से स्वयं कार्यान्वित कर सकते हैं। अब एक नजर डालते हैं कि हमें क्या मिला।


एप्लिकेशन पेज पर स्विच करता है

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

अब बात करते हैं लिस्ट फील्ड्स की।

सामान्य HTML में, कॉम्बो बॉक्स का वर्णन करने के लिए निम्न निर्माणों का उपयोग किया जाता है:

 <select>   <option></option>   <option></option>   <option></option> <select/> 

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

मान लीजिए हम एक कॉम्बो बॉक्स बनाना चाहते हैं जो उपयोगकर्ता को उसके पसंदीदा रंग का चयन करने की अनुमति देता है। ऐसा करने के लिए, आप निम्न निर्माण को select तत्व के value विशेषता में रख सकते हैं: value={this.state.favColor} । यह उन मानों को प्राप्त करेगा जो उपयोगकर्ता का चयन करता है। अब राज्य में favColor जोड़ें:

 this.state = {   firstName: "",   lastName: "",   isFriendly: false,   gender: "",   favColor: "blue" } 

अगला, हम कॉम्बो बॉक्स को onChange इवेंट onChange लैस करते हैं और इसे एक नाम देते हैं। हम कॉम्बो बॉक्स के options तत्वों के लिए मान भी प्रदान करते options और बॉक्स में प्रदर्शित पाठ दर्ज करेंगे।

यहाँ एक हस्ताक्षर के साथ एक select हस्ताक्षर का select तत्व कैसा दिखता है:

 <label>Favorite Color:</label> <select   value={this.state.favColor}   onChange={this.handleChange}   name="favColor" >   <option value="blue">Blue</option>   <option value="green">Green</option>   <option value="red">Red</option>   <option value="orange">Orange</option>   <option value="yellow">Yellow</option> </select> 

अब उस फॉर्म में एक और शिलालेख जोड़ें जो उपयोगकर्ता के पसंदीदा रंग को प्रदर्शित करता है:

 <h2><font color="#3AC1EF">Your favorite color is {this.state.favColor}</font></h2> 

यह कॉम्बो बॉक्स को आज़माने का समय है।


कॉम्बो बॉक्स

जैसा कि आप देख सकते हैं, हालांकि हमारा रूप डिजाइन के परिष्कार के साथ नहीं चमकता है, इस पर लगाए गए नियंत्रण अपेक्षित रूप से काम करते हैं।

जिस तरह से रिएक्ट में रिएक्ट नियंत्रण आयोजित किए जाते हैं, उसके लिए धन्यवाद, उनकी घटनाओं को संभालने के लिए एक ही हैंडलर का उपयोग करना आसान है। यह वास्तव में हमारे मामले में उपयोग की गई कार्य योजना है। हमारे handleChange() हैंडलर की एकमात्र विशेषता यह है कि हमें फ्लैग इवेंट्स को एक विशेष तरीके से हैंडल करना होगा।

अब बात करते हैं कि फॉर्म जमा करने या उसके पूरा होने के बाद उसमें दर्ज किए गए मूल्यों को संसाधित करने के बारे में। ऐसे कार्यों को करने के लिए दो दृष्टिकोण हैं। उनमें से किसी का उपयोग करते समय, फॉर्म एक बटन से सुसज्जित होना चाहिए:

 <button>Submit</button> 

HTML5 में, यदि एक button तत्व फॉर्म में पाया जाता है, तो यह टाइप submit पुराने input तत्व की तरह कार्य करेगा। यदि आप इस बटन पर क्लिक करते हैं, तो onSubmit फॉर्म की एक घटना स्वयं चालू हो जाएगी। यदि आपको फ़ॉर्म को पूरा करने के बाद कुछ करने की ज़रूरत है, तो आप onClick ईवेंट onClick को बटन में जोड़ सकते हैं, लेकिन, उदाहरण के लिए, मैं व्यक्तिगत रूप से इस तरह के ईवेंट्स को onSubmit ईवेंट हैंडलर को असाइन करके फ़ॉर्म स्तर पर हैंडल करना पसंद करता onSubmit :

 <form onSubmit={this.handleSubmit}> 

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

परिणाम

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

प्रिय पाठकों! यदि आपने रिएक्ट में फॉर्म बनाने के लिए फॉर्मिक लाइब्रेरी का उपयोग करने की कोशिश की है, तो कृपया हमें इसके बारे में बताएं।