रिएक्ट ट्यूटोरियल भाग 18: 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: पाठ्यक्रम परियोजना

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

→ मूल

▍Zadanie

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

1. App घटक में एक ईवेंट हैंडलर बनाएं जो फ्लैग onChange जवाब में है (हम onChange इवेंट के बारे में बात कर रहे हैं) और उसके अनुसार एप्लिकेशन की स्थिति में बदलाव करता है। शायद यह आज के कार्य का सबसे कठिन हिस्सा है। इसके साथ सामना करने के लिए - कोड में प्रदान की गई टिप्पणियों और रिक्त स्थान पर ध्यान दें।
2. TodoItem घटक के लिए उपयुक्त विधि पास करें।
3. TodoItem घटक में TodoItem एक ऐसा तंत्र बनाएँ, जो जब onChange घटना onChange , तो घटक को कॉल करने के लिए घटक आवृत्ति पर जाए और इसे केस आइडेंटिफ़ायर ( id ) पास करे, जो उपयोगकर्ता द्वारा क्लिक किए गए ध्वज से मेल खाती है।

यहाँ App घटक के लिए कोड है:

 import React from "react" import TodoItem from "./TodoItem" import todosData from "./todosData" class App extends React.Component {   constructor() {       super()       this.state = {           todos: todosData       }       this.handleChange = this.handleChange.bind(this)   }     handleChange(id) {       //   ,      id        // completed   c false  true ( ).       //   ,       .       //       ,  .       // (  ,       map.)   }     render() {       const todoItems = this.state.todos.map(item => <TodoItem key={item.id} item={item}/>)             return (           <div className="todo-list">               {todoItems}           </div>       )   } } export default App 

▍Reshenie

शुरू करने के लिए, handleChange() पद्धति पर कॉल की जांच के लिए एक सरल तंत्र बनाएं। अर्थात्, हम इसे इस रूप में लाते हैं:

 handleChange(id) {   console.log("Changed", id) } 

अब हम लागू कर रहे हैं कि असाइनमेंट के पैराग्राफ 2 और 3 के अनुसार क्या किया जाना चाहिए। यही है, हम झंडे पर क्लिक करने और इस झंडे की id पास करने के साथ handleChange() विधि को कॉल करने के बीच एक कनेक्शन बनाएंगे।

handleChange() घटक के एक उदाहरण के लिए handleChange() संदर्भ को पारित करने के लिए, हम इसे पास करने वाले गुणों के समान कर सकते हैं और इस तरह के घटकों की सूची बनाने के लिए कोड को फिर से लिख सकते हैं:

 const todoItems = this.state.todos.map(item => <TodoItem key={item.id} item={item} handleChange={this.handleChange}/>) 

ध्यान दें कि handleChange प्रॉपर्टी, जो handleChange घटकों के लिए उपलब्ध होगी, में App कंपोनेंट के इंस्टेंस के handleChange विधि का संदर्भ है। TodoItem घटक में, इस विधि को उसी तरह से एक्सेस किया जा सकता है जैसे कि अन्य गुण इसके पास गए थे। इस स्तर पर, TodoItem कोड इस तरह दिखता है:

 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 

घटक कोड में handleChange विधि को कॉल करने के लिए, आप प्रपत्र props.handleChange() निर्माण का उपयोग कर सकते हैं। इस मामले में, इस विधि id तत्व की id को पारित करने की आवश्यकता है। onChange ईवेंट onChange किसी ईवेंट ऑब्जेक्ट को स्वीकार करता है। हमें handleChange() विधि को कॉल करने के लिए इस ऑब्जेक्ट की आवश्यकता नहीं है। हम उस कोड को फिर से लिखते हैं जिसमें हम तत्व को onChange ईवेंट हैंडलर असाइन करते हैं, जो निम्नानुसार है:

 onChange={(event) => props.handleChange(props.item.id)} 

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

 onChange={() => props.handleChange(props.item.id)} 

अब एप्लिकेशन को चलाने का प्रयास करें और, कंसोल को खोलकर, चेकबॉक्स पर क्लिक करें।


हैंडलचेंज () विधि का परीक्षण

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

शुरू करने के लिए, हमें उस राज्य के बारे में समस्या को हल करने की आवश्यकता है कि एक राज्य में एक सरणी संग्रहीत है, एक तत्व, जिसमें एक ध्वज पर एक क्लिक के जवाब में, परिवर्तन से गुजरना होगा, लेकिन हमें राज्य के पुराने संस्करण में संग्रहीत सरणी को संशोधित नहीं करना चाहिए। उदाहरण के लिए, आप केवल एक राज्य में पहले से ही वस्तुओं की एक सरणी के माध्यम से नहीं चल सकते हैं, आवश्यक तत्व ढूंढ सकते हैं और इसकी completed संपत्ति को बदल सकते हैं। हमें यह चाहिए कि, राज्य को बदलने के बाद, एक नई सरणी बनाई जाएगी, जिसमें से एक तत्व को बदल दिया जाएगा, और बाकी सभी वही रहेंगे जो पहले थे। इस तरह के एक सरणी के निर्माण के दृष्टिकोणों में से एक map() सरणी विधि का उपयोग है, जो कार्य में टिप्पणियों में वर्णित है। हम setState() विधि में कोड लिखेंगे। आइए, App घटक से निम्नलिखित तरीके से handleChange() विधि handleChange() कोड handleChange() :

 handleChange(id) {   this.setState(prevState => {         }) } 

अब, map() पद्धति का उपयोग करते हुए, हम prevState.todos सरणी के माध्यम से prevState.todos और उस तत्व की तलाश करेंगे जिसमें हमें इसकी आवश्यकता है, handleChange() , जिसकी id handleChange() विधि से पारित हो गई है, और फिर इसकी completed संपत्ति को बदल दें। map() विधि एक नया सरणी देता है, जिसका उपयोग एप्लिकेशन की नई स्थिति में किया जाएगा, इसलिए हम इस सरणी को एक स्थिर पर लिखेंगे। यहाँ यह कैसा दिखता है:

 handleChange(id) {   this.setState(prevState => {       const updatedTodos = prevState.todos.map(todo => {           if (todo.id === id) {               todo.completed = !todo.completed           }           return todo       })       return {           todos: updatedTodos       }   }) } 

यहां, map() का उपयोग करते हुए सरणी के प्रसंस्करण के दौरान, यदि कोई तत्व जिसकी id id के handleChange() विधि के बराबर handleChange() , का handleChange() जाता handleChange() , तो इस तत्व की completed संपत्ति का मूल्य उलट होता है ( true से false और इसके विपरीत)। उसके बाद, चाहे तत्व बदल दिया गया हो, फिर भी, map() उस तत्व को लौटाता है। यह उसी सूचकांक के तहत एक नए सरणी ( updatedTodos स्थिरांक द्वारा प्रतिनिधित्व) में आता है, जिसके तहत राज्य के पिछले संस्करण से संबंधित तत्व updatedTodos सरणी में था। पूरे सरणी स्कैन होने के बाद और updatedTodos सरणी पूरी तरह से बन जाने के बाद, इस सरणी का उपयोग setState() विधि द्वारा लौटाए गए ऑब्जेक्ट की setState() संपत्ति के मूल्य के रूप में किया जाता है, जो राज्य का एक नया संस्करण है।

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

परिणाम

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

प्रिय पाठकों! क्या आपने आज के व्यावहारिक काम का सामना किया?