रिएक्ट ट्यूटोरियल भाग 25: फार्म पर कार्यशाला

रिएक्ट प्रशिक्षण पाठ्यक्रम के अनुवाद के एक हिस्से में, आपको एक फॉर्म टास्क को पूरा करने के लिए आमंत्रित किया जाता है।



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

पाठ 43. कार्यशाला। रूपों के साथ काम करें

→ मूल

▍Zadanie

इस व्यावहारिक पाठ में, आपको App घटक के कोड को लाने के लिए आमंत्रित किया गया है, जो कि create-react-app द्वारा बनाई गई मानक परियोजना के App.js फ़ाइल में स्थित है। यहाँ कोड है:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {}   }     render() {       return (           <main>               <form>                   <input placeholder="First Name" /><br />                   <input placeholder="Last Name" /><br />                   <input placeholder="Age" /><br />                                     {/*       */}                   <br />                                     {/*          */}                   <br />                                     {/*        */}                   <br />                                     <button>Submit</button>               </form>               <hr />               <h2><font color="#3AC1EF">Entered information:</font></h2>               <p>Your name: {/*    */}</p>               <p>Your age: {/*  */}</p>               <p>Your gender: {/*  */}</p>               <p>Your destination: {/*   */}</p>               <p>                   Your dietary restrictions:                   {/*    */}               </p>           </main>       )   } } export default App 

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

यहाँ वह घटक है जो अब स्क्रीन पर प्रदर्शित होता है।


ब्राउज़र में अनुप्रयोग

▍Reshenie

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

फिलहाल, घटक की स्थिति नीचे दिखाए गए अनुसार दिखाई देगी।

 this.state = {   firstName: "",   lastName: "",   age: 0,   gender: "",   destination: "",   dietaryRestrictions: [] } 

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

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

इन नियंत्रणों को उनके name विशेषताओं को सेट करके name दिए जाने की आवश्यकता होगी ताकि वे उन राज्य संपत्तियों के नामों से मेल खाएं जिनमें इन क्षेत्रों में दर्ज किए गए डेटा को संग्रहीत किया जाएगा। उनके पास एक value विशेषता होनी चाहिए जिसका मूल्य राज्य में संग्रहीत डेटा के आधार पर निर्धारित किया जाता है। इन क्षेत्रों में से प्रत्येक में डेटा दर्ज करते समय, आपको घटक को दर्ज किए गए डेटा को पास करने की आवश्यकता होती है, जिसके कारण उनके लिए onChange इवेंट onChange । ये सभी विचार इस तथ्य की ओर ले जाते हैं कि खेतों का विवरण अब इस तरह दिखता है:

 <input   name="firstName"   value={this.state.firstName}   onChange={this.handleChange}   placeholder="First Name" /> <br /> <input   name="lastName"   value={this.state.lastName}   onChange={this.handleChange}   placeholder="Last Name" /> <br /> <input   name="age"   value={this.state.age}   onChange={this.handleChange}   placeholder="Age" /> 

इन क्षेत्रों की घटनाओं को संसाधित करने के लिए उपयोग की जाने वाली विधि के रूप में, यह this.handleChange अभी भी अस्तित्वहीन है। इस विधि बनाएँ:

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

यहाँ हम event.target ऑब्जेक्ट से name और value गुण event.target , और फिर संबंधित राज्य गुण सेट करने के लिए उनका उपयोग करते हैं। फिलहाल, इस तरह का एक सार्वभौमिक ईवेंट हैंडलर कोड हमारे अनुरूप होगा, लेकिन बाद में, जब हमें झंडे के साथ काम करना होगा, तो हम इसमें बदलाव करेंगे।

घटक निर्माता में किए गए this बंधन के बारे में मत भूलना:

 this.handleChange = this.handleChange.bind(this) 

firstName , secondName firstName और age क्षेत्रों में दर्ज किए गए डेटा के पृष्ठ के निचले भाग में आउटपुट प्राप्त करने के लिए, secondName संबंधित <p> तत्वों के साथ काम करेंगे, उन्हें निम्न रूप में secondName :

 <p>Your name: {this.state.firstName} {this.state.lastName}</p> <p>Your age: {this.state.age}</p> 

अब एक नजर डालते हैं कि हमें क्या मिला।


ब्राउज़र में अनुप्रयोग

जैसा कि आप देख सकते हैं, क्षेत्र में उम्र दर्ज करने के लिए, एक संकेत प्रदर्शित नहीं किया जाता है। इसके बजाय, age की राज्य संपत्ति में जो सेट किया गया है, वह है, अर्थात, हमें खाली क्षेत्र में संकेत की आवश्यकता है। आइए, राज्य में age के मूल्य को null से बदलने का प्रयास करें। उसके बाद, यह पता चला कि प्रपत्र जैसा होना चाहिए वैसा दिखता है, लेकिन age क्षेत्र के संबंध में निम्नलिखित चेतावनी कंसोल में प्रदर्शित की गई है:

 Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components 

नतीजतन, हमें राज्य की संपत्ति के मूल्य को एक खाली स्ट्रिंग के साथ प्रतिस्थापित करना होगा, जिससे राज्य आरंभीकरण कोड को निम्न चरणों में लाया जा सकता है:

 this.state = {   firstName: "",   lastName: "",   age: "",   gender: "",   destination: "",   dietaryRestrictions: [] } 

अब फॉर्म को आजमाएं। उद्घाटन के तुरंत बाद, यह काम की शुरुआत में ही दिखाई देगा, अर्थात्, प्रॉम्प्ट age क्षेत्र में वापस आ जाएगा। खेतों में भरते समय, दर्ज किया गया डेटा पृष्ठ के नीचे प्रदर्शित होगा।


ब्राउज़र में अनुप्रयोग

जैसा कि आप देख सकते हैं, काम के इस स्तर पर, सब कुछ अपेक्षित रूप से कार्य करता है।

अब हम नए तत्वों में लगे रहेंगे। प्रपत्र पर काम करने का अगला चरण इसमें स्विच जोड़ना होगा।

हम स्विच को <label> में लपेटते हैं, जो हमें न केवल स्विच पर हस्ताक्षर करने की अनुमति देगा, बल्कि यह भी सुनिश्चित करेगा कि इस हस्ताक्षर पर क्लिक करना, अर्थात, इसके मूल तत्व पर, इसके चयन की ओर जाता है।

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

नतीजतन, स्विच विवरण कोड इस तरह दिखाई देगा:

 <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> 

अब हम <p> के निचले भाग पर स्थित <p> तत्व को निम्नानुसार संसाधित करेंगे:

 <p>Your gender: {this.state.gender}</p> 

उसके बाद, फॉर्म का परीक्षण किया जा सकता है। शुरू करने के तुरंत बाद, दोनों स्विच अचयनित होते हैं, क्योंकि एक राज्य एक मूल्य में संग्रहीत होता है जो किसी भी चेक को निष्पादित करने की अनुमति नहीं देता है जब उनकी checked संपत्ति को checked लिए सेट किया जाता true । उनमें से एक पर क्लिक करने के बाद, संबंधित मान राज्य में बदल जाता है (स्विच की value विशेषता में संग्रहीत), स्विच का चयन किया जाता है, इसी पाठ को फॉर्म के नीचे प्रदर्शित किया जाता है।


ब्राउज़र में अनुप्रयोग

अब चलो कॉम्बो बॉक्स पर काम करते हैं। उनकी वर्कपीस इस तरह दिखती है:

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

यह कोड दिखाता है कि हम चार वस्तुओं वाले कॉम्बो बॉक्स का वर्णन करने की योजना बना रहे हैं।

<select> टैग और इसके <option> टैग में एक value विशेषता है। हालाँकि, ये विशेषताएँ अलग-अलग अर्थ लेती हैं। <option> तत्व को निर्दिष्ट मूल्य value बताता है कि जब इस तत्व का चयन किया जाता है तो संबंधित राज्य संपत्ति क्या होनी चाहिए। ये वो लाइनें हैं जो ड्रॉप-डाउन सूची में होनी चाहिए। हमारे मामले में, ये कुछ निश्चित गंतव्य हैं, उदाहरण के लिए, देश। हम एक छोटे से पत्र के साथ उनके नाम लिखते हैं ताकि उनकी उपस्थिति कोड में अन्य तत्वों के value गुणों के मूल्यों के अनुरूप हो। उसके बाद, कॉम्बो बॉक्स का कोड इस तरह दिखेगा:

 <select value=>   <option value="germany">Germany</option>   <option value="norway">Norway</option>   <option value="north pole">North Pole</option>   <option value="south pole">South Pole</option> </select> 

यदि हम <select> के value विशेषता के बारे में बात करते हैं, तो कुछ हार्ड-कोडित मूल्य यहां नहीं दिखाए जाएंगे, लेकिन संबंधित राज्य संपत्ति के लिए एक लिंक:

 <select value={this.state.destination}>   <option value="germany">Germany</option>   <option value="norway">Norway</option>   <option value="north pole">North Pole</option>   <option value="south pole">South Pole</option> </select> 

फ़ील्ड अन्य विशेषताएँ असाइन करें। विशेष रूप से, राज्य में संपत्ति के नाम के अनुरूप नाम, और this.handleChange इवेंट onChange , this.handleChange ।

 <select   value={this.state.destination}   name="destination"   onChange={this.handleChange} >   <option value="germany">Germany</option>   <option value="norway">Norway</option>   <option value="north pole">North Pole</option>   <option value="south pole">South Pole</option> </select> 

अब हम <p> तत्व के विवरण को कॉन्फ़िगर करेंगे, जो प्रदर्शित करेगा कि destination क्षेत्र में क्या चुना गया destination :

 <p>Your destination: {this.state.destination}</p> 

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


ब्राउज़र में अनुप्रयोग

राज्य में गिरावट के लिए germany मूल्य के लिए, आपको कॉम्बो बॉक्स खोलना होगा और पहले कुछ और चुनना होगा, और फिर Germany चयन करना होगा।

अक्सर, सूची क्षेत्रों की इस विशेषता को ध्यान में रखने के लिए, उनकी सूचियों में, पहले तत्व के रूप में, वे एक खाली मूल्य के साथ एक तत्व की तरह कुछ डालते हैं और जैसे पाठ -- Please Choose a destination -- । हमारे मामले में, ऐसा लग सकता है:

 <select   value={this.state.destination}   name="destination"   onChange={this.handleChange} >   <option value="">-- Please Choose a destination --</option>   <option value="germany">Germany</option>   <option value="norway">Norway</option>   <option value="north pole">North Pole</option>   <option value="south pole">South Pole</option> </select> 

हम कॉम्बो बॉक्स सेट करने के इस विकल्प पर ध्यान केंद्रित करेंगे।

अब आइए, हमारे कार्य का सबसे कठिन हिस्सा है, जो झंडे के साथ जुड़ा हुआ है। यहां यह dietaryRestrictions कि राज्य संपत्ति dietaryRestrictions , जिसे झंडे के साथ काम करने के लिए उपयोग करने की योजना है, को खाली सरणी के साथ आरम्भ किया गया था। अब, जब नियंत्रण के साथ काम करने की बात आती है, तो यह महसूस होता है कि इस क्षेत्र को एक वस्तु के रूप में प्रस्तुत करना बेहतर होगा। तो यह उन संस्थाओं के साथ काम करने के लिए अधिक सुविधाजनक होगा जो इस नाम के गुणों के रूप में व्यक्तिगत झंडे का प्रतिनिधित्व करते हैं, अनुकूल नाम के साथ, और सरणी तत्वों के रूप में नहीं। ऑब्जेक्ट के गुण, जो अब dietaryRestrictions राज्य dietaryRestrictions द्वारा dietaryRestrictions जाएंगे, इसमें बूलियन मान शामिल होंगे जो यह दर्शाता है कि संबंधित चेकबॉक्स साफ़ किया गया है ( false ) या चेक किया गया ( true )। अब राज्य प्रारंभिक कोड इस तरह दिखेगा:

 this.state = {   firstName: "",   lastName: "",   age: "",   gender: "",   destination: "",   dietaryRestrictions: {       isVegan: false,       isKosher: false,       isLactoseFree: false   } } 

जैसा कि आप देख सकते हैं, हमने तीन झंडे बनाने की योजना बनाई है। पृष्ठ लोड करने के तुरंत बाद, वे सभी रीसेट हो जाएंगे।

हम घटक द्वारा लौटाए गए कोड में झंडे का वर्णन करते हैं, उन्हें <label> टैग में लपेटते हैं और उनकी विशेषताओं को सेट करते हैं। यहाँ उनके कोड की तरह दिखेगा:

 <label>   <input       type="checkbox"       name="isVegan"       onChange={this.handleChange}       checked={this.state.dietaryRestrictions.isVegan}   /> Vegan? </label> <br /> <label>   <input       type="checkbox"       name="isKosher"       onChange={this.handleChange}       checked={this.state.dietaryRestrictions.isKosher}   /> Kosher? </label> <br /> <label>   <input       type="checkbox"       name="isLactoseFree"       onChange={this.handleChange}       checked={this.state.dietaryRestrictions.isLactoseFree}   /> Lactose Free? </label> 

उपयोग किए गए झंडे के नाम dietaryRestrictions ऑब्जेक्ट की संपत्ति के नाम हैं, और उनके checked विशेषताओं के मान इस के निर्माण के रूप हैं this.state.dietaryRestrictions.isSomething ।

कृपया ध्यान दें कि हालांकि पहले से ही मौजूद इस। onChange को onChange this.handleChange इवेंट हैंडलर के रूप में इंगित किया गया है, हमें यह सुनिश्चित करने के लिए प्रोग्राम में कुछ बदलाव करने होंगे कि प्रोग्राम सही तरीके से काम करे।

आवेदन पर एक नज़र डालें।


ब्राउज़र में अनुप्रयोग

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

यहां, चेकबॉक्स के साथ काम करने के लिए, हमें पहले से निकाले गए, type और checked गुणों के अलावा, ऑब्जेक्ट से event.target को निकालने की आवश्यकता है। पहले तत्व के प्रकार की जांच करने की आवश्यकता है (झंडे checkbox लाइन द्वारा दर्शाए गए प्रकार के हैं), दूसरा यह पता लगाने के लिए है कि चेकबॉक्स चेक किया गया है या अनियंत्रित है। यदि यह पता चलता है कि उपयोगकर्ता द्वारा ध्वज के साथ बातचीत करने के बाद हैंडलर को बुलाया गया था, तो हम एक विशेष राज्य सेटिंग प्रक्रिया का उपयोग करते हैं। हम अन्य नियंत्रणों की घटनाओं को पहले की तरह ही संभालेंगे।

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

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

यदि आप एक ब्राउज़र में एप्लिकेशन पेज खोलते हैं, तो इसे डाउनलोड करने के तुरंत बाद, सब कुछ ठीक हो जाएगा, जब आप प्रयास करते हैं, उदाहरण के लिए, First Name फ़ील्ड में नाम दर्ज करने के लिए, सब कुछ पहले की तरह भी काम करेगा, लेकिन जब आप चेकबॉक्स में से किसी एक को सेट करने का प्रयास करते हैं, तो निम्न चेतावनी जारी की जाएगी। :

चेतावनी: एक घटक अनियंत्रित होने के लिए टाइप चेकबॉक्स के नियंत्रित इनपुट को बदल रहा है। इनपुट तत्वों को नियंत्रित से अनियंत्रित (या इसके विपरीत) पर स्विच नहीं करना चाहिए। घटक के जीवनकाल के लिए नियंत्रित या अनियंत्रित इनपुट तत्व का उपयोग करने के बीच का निर्णय लें। अधिक जानकारी: fb.me/react-controlled-compenders

dietaryRestrictions ऑब्जेक्ट की सामग्री को सही ढंग से अपडेट करने के लिए, आप स्वयं राज्य का एक नया संस्करण बनाने के लिए setState कार्यात्मक रूप का उपयोग कर सकते हैं। अगर हमें बड़ी संख्या में झंडे का प्रबंधन करना होता, तो शायद हम ऐसा कर लेते। लेकिन यहाँ हम अन्यथा करेंगे। अर्थात्, हम dietaryRestrictions के dietaryRestrictions वस्तु dietaryRestrictions बना देंगे, इस वस्तु से छुटकारा dietaryRestrictions :

 this.state = {   firstName: "",   lastName: "",   age: "",   gender: "",   destination: "",   isVegan: false,   isKosher: false,   isLactoseFree: false } 

अब हम झंडे की विशेषताओं के लिए सेटिंग्स को बदल देंगे, dietaryRestrictions से छुटकारा पा dietaryRestrictions :

 <label>   <input       type="checkbox"       name="isVegan"       onChange={this.handleChange}       checked={this.state.isVegan}   /> Vegan? </label> <br /> <label>   <input       type="checkbox"       name="isKosher"       onChange={this.handleChange}       checked={this.state.isKosher}   /> Kosher? </label> <br /> <label>   <input       type="checkbox"       name="isLactoseFree"       onChange={this.handleChange}       checked={this.state.isLactoseFree}   /> Lactose Free? </label> 

और अंत में, उस तत्व के कोड को संपादित करें जो उपयोगकर्ता द्वारा निर्दिष्ट आहार प्रतिबंधों के बारे में जानकारी प्रदर्शित करता है:

 <p>Your dietary restrictions:</p> <p>Vegan: {this.state.isVegan ? "Yes" : "No"}</p> <p>Kosher: {this.state.isKosher ? "Yes" : "No"}</p> <p>Lactose Free: {this.state.isLactoseFree ? "Yes" : "No"}</p> 

उसके बाद, हम आवेदन के स्वास्थ्य की जांच करेंगे।


ब्राउज़र में अनुप्रयोग

जैसा कि आप देख सकते हैं, सब कुछ उम्मीद के मुताबिक काम करता है।

यहाँ App घटक का पूरा कोड है:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           firstName: "",           lastName: "",           age: "",           gender: "",           destination: "",           isVegan: false,           isKosher: false,           isLactoseFree: false       }       this.handleChange = this.handleChange.bind(this)   }     handleChange(event) {       const {name, value, type, checked} = event.target       type === "checkbox" ?           this.setState({               [name]: checked           })       :       this.setState({           [name]: value       })   }     render() {       return (           <main>               <form>                   <input                       name="firstName"                       value={this.state.firstName}                       onChange={this.handleChange}                       placeholder="First Name"                   />                   <br />                                     <input                       name="lastName"                       value={this.state.lastName}                       onChange={this.handleChange}                       placeholder="Last Name"                   />                   <br />                                     <input                       name="age"                       value={this.state.age}                       onChange={this.handleChange}                       placeholder="Age"                   />                   <br />                                     <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>                                     <br />                                     <select                       value={this.state.destination}                       name="destination"                       onChange={this.handleChange}                   >                       <option value="">-- Please Choose a destination --</option>                       <option value="germany">Germany</option>                       <option value="norway">Norway</option>                       <option value="north pole">North Pole</option>                       <option value="south pole">South Pole</option>                   </select>                                     <br />                                     <label>                       <input                           type="checkbox"                           name="isVegan"                           onChange={this.handleChange}                           checked={this.state.isVegan}                       /> Vegan?                   </label>                   <br />                                     <label>                       <input                           type="checkbox"                           name="isKosher"                           onChange={this.handleChange}                           checked={this.state.isKosher}                       /> Kosher?                   </label>                   <br />                                     <label>                       <input                           type="checkbox"                           name="isLactoseFree"                           onChange={this.handleChange}                           checked={this.state.isLactoseFree}                       /> Lactose Free?                   </label>                   <br />                                     <button>Submit</button>               </form>               <hr />               <h2><font color="#3AC1EF">Entered information:</font></h2>               <p>Your name: {this.state.firstName} {this.state.lastName}</p>               <p>Your age: {this.state.age}</p>               <p>Your gender: {this.state.gender}</p>               <p>Your destination: {this.state.destination}</p>               <p>Your dietary restrictions:</p>                             <p>Vegan: {this.state.isVegan ? "Yes" : "No"}</p>               <p>Kosher: {this.state.isKosher ? "Yes" : "No"}</p>               <p>Lactose Free: {this.state.isLactoseFree ? "Yes" : "No"}</p>                         </main>       )   } } export default App 

परिणाम

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

प्रिय पाठकों! मुझे बताओ, क्या इस व्यावहारिक कार्य को पूरा करना मुश्किल था?