रिएक्ट ट्यूटोरियल, भाग 17: एक TODO अनुप्रयोग पर काम करने का पांचवा चरण, घटकों के राज्य को संशोधित करना

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



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

पाठ 31. कार्यशाला। TODO आवेदन। स्टेज नंबर 5

→ मूल

▍Zadanie

हमारे टोडो एप्लिकेशन को लॉन्च करते समय, आप देख सकते हैं कि कंसोल में एक सूचना प्रदर्शित होती है जो यह इंगित करती है कि हम, TodoItem घटक में एक तत्व की checked की checked संपत्ति को कॉन्फ़िगर करते हैं, onChange इवेंट onChange के रूप में इस तत्व के साथ बातचीत करने के लिए एक तंत्र प्रदान नहीं करते हैं। एप्लिकेशन इंटरफ़ेस के साथ काम करते समय, यह इस तथ्य के परिणामस्वरूप होता है कि पृष्ठ पर प्रदर्शित झंडे को चेक या अनचेक नहीं किया जा सकता है।

यहां आपको TodoItem इवेंट हैंडलर के साथ TodoItem घटक के checkbox प्रकार के एक तत्व से लैस करने के लिए आमंत्रित किया गया है, जो काम के इस चरण में, एक फ़ंक्शन के रूप में प्रस्तुत करने के लिए पर्याप्त है जो कंसोल को कुछ आउटपुट करता है।

▍Reshenie

TodoItem घटक कोड अब यहाँ दिखता है, जो TodoItem.js फ़ाइल में संग्रहीत है:

 import React from "react" function TodoItem(props) {   return (       <div className="todo-item">           <input type="checkbox" checked={props.item.completed}/>           <p>{props.item.text}</p>       </div>   ) } export default TodoItem 

यह तब होता है जब एप्लिकेशन शुरू होने पर कंसोल प्रदर्शित होता है।


सांत्वना अधिसूचना

इसी समय, झंडे हमारे प्रभावों का जवाब नहीं देते हैं।

इस अधिसूचना से छुटकारा पाने के लिए और आगे के काम के लिए परियोजना तैयार करने के लिए, यह checkbox तत्व को onChange इवेंट onChange आवंटित करने के लिए पर्याप्त है। यहाँ कोड में ऐसा दिखता है:

 import React from "react" function TodoItem(props) {   return (       <div className="todo-item">           <input               type="checkbox"               checked={props.item.completed}               onChange={() => console.log("Changed!")}           />           <p>{props.item.text}</p>       </div>   ) } export default TodoItem 

यहाँ हम, एक हैंडलर के रूप में, एक साधारण फ़ंक्शन का उपयोग करते हैं जो कंसोल को Checked! शब्द को आउटपुट करता है Checked! । उसी समय, झंडे पर क्लिक करने से उनके राज्य में बदलाव नहीं होता है, लेकिन कंसोल से अधिसूचना, जैसा कि निम्नलिखित आंकड़े में देखा जा सकता है, गायब हो जाती है।


झंडे अभी भी काम नहीं कर रहे हैं, लेकिन कंसोल से अधिसूचना गायब हो गई

चेकबॉक्स को सही ढंग से काम करने के लिए, घटकों की स्थिति में परिवर्तन से निपटने के बाद, आवेदन में किया गया यह छोटा सा बदलाव हमें अनुमति देगा।

पाठ 32. अवयवों की स्थिति बदलना

→ मूल

चलिए App.js फ़ाइल में, जिसमें निम्नलिखित कोड शामिल हैं, create-react-app का उपयोग करके बनाए गए एक मानक एप्लिकेशन से शुरू करते create-react-app :

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           count: 0       }   }     render() {       return (           <div>               <h1>{this.state.count}</h1>               <button>Change!</button>           </div>       )   } } export default App 

index.css शैलियाँ index.css , जो index.js फ़ाइल में शामिल है, में निम्नलिखित शैलियों का वर्णन है:

 div {   display: flex;   flex-direction: column;   align-items: center;   justify-content: center; } h1 {   font-size: 3em; } button {   border: 1px solid lightgray;   background-color: transparent;   padding: 10px;   border-radius: 4px;  } button:hover {   cursor: pointer; } button:focus {   outline:0; } 

इस स्तर पर, एप्लिकेशन निम्न आकृति में दिखाया गया है।


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

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

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

इसमें, हम, हमेशा की तरह, super() पद्धति को कॉल करते हैं और राज्य को प्रारंभिक गुण को लिखकर और उसे 0 का प्रारंभिक मान निर्दिष्ट करके आरंभ करते हैं। render() विधि में, हम एक प्रथम-स्तरीय हेडर प्रिंट करते हैं जो घटक की स्थिति से count संपत्ति के मूल्य का प्रतिनिधित्व करता है, साथ ही साथ शब्द Change! साथ एक बटन Change! । यह सभी शैलियों का उपयोग करके स्वरूपित है।

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

आइए onClick इवेंट onClick साथ बटन को लैस करके हमारी समस्या को हल करने के लिए नीचे जाएं, जो शुरुआत के लिए, बस कंसोल को कुछ आउटपुट देगा।

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

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           count: 0       }   }     handleClick() {       console.log("I'm working!")   }     render() {       return (           <div>               <h1>{this.state.count}</h1>               <button onClick={this.handleClick}>Change!</button>           </div>       )   } } export default App 

कृपया ध्यान दें कि render() से इस पद्धति का जिक्र करते हुए, हम फॉर्म के निर्माण का उपयोग करते हैं this.handleClick ।

अब, यदि आप बटन पर क्लिक करते हैं, तो कंसोल में संबंधित संदेश दिखाई देगा।


बटन पर क्लिक करने से क्लास मेथड कॉल होता है।

अब इसे बनाते हैं ताकि बटन पर क्लिक करने पर इसके ऊपर प्रदर्शित संख्या बढ़े, अर्थात घटक की स्थिति को संशोधित करें। शायद घटक की स्थिति को सीधे handleClick() विधि में बदलने का प्रयास करें? मान लीजिए कि यदि हम इस विधि को इस तरह से लिखते हैं:

 handleClick() {   this.state.count++ } 

मुझे तुरंत कहना होगा कि यह रिएक्ट में घटकों की स्थिति के साथ काम नहीं करता है। इस तरह के कोड को अंजाम देने की कोशिश में एक त्रुटि होगी।

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

आपको याद होगा कि हम एक विशेष विधि के बारे में बात कर रहे थे जिसका उपयोग राज्य को संशोधित करने के लिए किया गया था, जो इस तथ्य के कारण कक्षाओं के आधार पर घटकों में उपलब्ध है कि वे React.Component वर्ग का विस्तार करते हैं। यह setState() विधि है। इसका उपयोग उन मामलों में किया जाता है जहां आपको एक घटक की स्थिति को बदलने की आवश्यकता होती है। इस पद्धति का उपयोग विभिन्न तरीकों से किया जा सकता है।

स्मरण करो कि एक राज्य एक वस्तु है। आइए setState() विधि को पास करने का प्रयास करें जो राज्य को प्रतिस्थापित करेगी। हम इस handleClick() से handleClick() विधि को फिर से handleClick() :

 handleClick() {   this.setState({ count: 1 }) } 

इस विधि का उपयोग करने का प्रयास करने के बाद निम्न त्रुटि हो जाएगी: TypeError: Cannot read property 'setState' of undefined । वास्तव में, अब हम जिस बारे में बात कर रहे हैं, वह रिएक्ट डेवलपर्स के बीच बहुत विवाद का कारण बनता है, और अब मैं आपको इस समस्या को हल करने का एक बहुत ही सरल तरीका दिखाने जा रहा हूं, जो पहली नज़र में असामान्य लग सकता है।

मुद्दा यह है कि हर बार, एक क्लास मेथड ( handleClick() हमारे मामले में बनाया जाता है, जिसमें यह setState() मेथड का उपयोग करने की योजना बनाई जाती है, इस विधि को इसके साथ जोड़ना this । यह कंस्ट्रक्टर में किया जाता है। इस संशोधन के बाद घटक कोड इस तरह दिखेगा:

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           count: 0       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       this.setState({ count: 1 })   }     render() {       return (           <div>               <h1>{this.state.count}</h1>               <button onClick={this.handleClick}>Change!</button>           </div>       )   } } export default App 

अब Change! बटन पर क्लिक करने के बाद Change! नंबर 1 इसके ऊपर दिखाई देगा, त्रुटि संदेश प्रदर्शित नहीं किया जाएगा।


एक बटन दबाने से राज्य में बदलाव होता है

सच है, बटन "एक बार" निकला। इस पर पहला क्लिक करने के बाद, 0 से 1 परिवर्तन होता है, और यदि आप इसे फिर से क्लिक करते हैं, तो कुछ भी नहीं होगा। सामान्य तौर पर, यह आश्चर्य की बात नहीं है। जब बटन पर क्लिक किया जाता है तो कोड अपना काम करता है, हर बार राज्य को एक नए में बदल देता है, हालांकि, बटन पर पहले क्लिक के बाद, नया राज्य, जिसमें संख्या 1 को गुण में संग्रहीत किया जाता है, पुराने से अलग नहीं होगा। इस समस्या को हल करने के लिए, setState() विधि के साथ काम करने का एक और तरीका पर विचार करें।

यदि हम घटक के पहले की स्थिति के बारे में रुचि नहीं रखते हैं, तो हम बस इस विधि के लिए एक ऑब्जेक्ट पास कर सकते हैं, जो राज्य को बदल देगा। लेकिन अक्सर ऐसा होता है कि एक घटक की नई स्थिति पुराने पर निर्भर करती है। हमारे मामले में, इसका मतलब है कि, count संपत्ति के मूल्य के आधार पर, जिसे राज्य के पिछले संस्करण में संग्रहीत किया जाता है, हम इस मूल्य में 1 जोड़ना चाहते हैं। ऐसे मामलों में जहां राज्य को बदलने के लिए आपको यह जानने की जरूरत है कि इसमें पहले क्या संग्रहीत किया गया था, आप setState() विधि से एक फ़ंक्शन को पारित कर सकते हैं जो एक पैरामीटर के रूप में, राज्य के पिछले संस्करण को प्राप्त करता है। आप इस पैरामीटर को अपनी prevState नाम दे सकते हैं, हमारे मामले में यह prevState होगा। इस फ़ंक्शन की खरीद इस तरह दिखाई देगी:

 handleClick() {   this.setState(prevState => {             }) } 

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

फ़ंक्शन को राज्य का एक नया संस्करण वापस करना चाहिए। इस समस्या को handleClick() करने के handleClick() कैसा दिखेगा handleClick() विधि

 handleClick() {   this.setState(prevState => {       return {           count: prevState.count + 1       }   }) } 

ध्यान दें कि count संपत्ति का नया मूल्य प्राप्त करने के लिए, हम count: prevState.count + 1 उपयोग करते हैं count: prevState.count + 1 निर्माण। आप सोच सकते हैं कि फॉर्म count: prevState.count++ का एक निर्माण count: prevState.count++ यहां उपयुक्त है, लेकिन ++ ऑपरेटर count: prevState.count++ चर को count: prevState.count++ जिसे इसे लागू किया जाता है, इसका मतलब राज्य के पिछले संस्करण को संशोधित करने का प्रयास होगा, इसलिए हम इसका उपयोग यहां नहीं करते हैं।

इस स्तर पर घटक फ़ाइल का पूरा कोड इस तरह दिखेगा:

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           count: 0       }       this.handleClick = this.handleClick.bind(this)   }     handleClick() {       this.setState(prevState => {           return {               count: prevState.count + 1           }       })   }       render() {       return (           <div>               <h1>{this.state.count}</h1>               <button onClick={this.handleClick}>Change!</button>           </div>       )   } } export default App 

अब बटन पर प्रत्येक क्लिक काउंटर मूल्य को बढ़ाता है।


बटन पर प्रत्येक क्लिक काउंटर मूल्य को बढ़ाता है।

क्या हम पता लगा कि प्रतिक्रिया अनुप्रयोगों के विकास में हमारे लिए महान अवसर खोलता है।

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

परिणाम

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

प्रिय पाठकों! आप इस तथ्य के बारे में कैसा महसूस करते हैं कि रिएक्ट में घटकों की स्थिति को विशेष तंत्र का उपयोग किए बिना सीधे नहीं बदला जा सकता है?