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

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

→ मूल

▍Zadanie

पिछली बार, हमने JSON फ़ाइल से एप्लिकेशन के लिए टू-डू सूची डाउनलोड की, और फिर, परिणामी सरणी के माध्यम से चलते हुए, हमने map() विधि, घटकों का एक सेट का उपयोग करके बनाया। हम इस डेटा को संशोधित करना चाहेंगे। और हम केवल यह कर सकते हैं यदि हम उन्हें घटक की स्थिति में पूर्व-लोड करते हैं।

आज का कार्य आपके लिए App घटक को राज्य घटक में परिवर्तित करने और आयातित घटक डेटा को उस घटक की स्थिति में लोड करने का है।

▍Reshenie

हमारी परियोजना में पहले से ही App घटक कोड को याद करें:

 import React from "react" import TodoItem from "./TodoItem" import todosData from "./todosData" function App() {   const todoItems = todosData.map(item => <TodoItem key={item.id} item={item}/>)     return (       <div className="todo-list">           {todoItems}       </div>   ) } export default App 

टू-डू सूची से डेटा को संशोधित करने में सक्षम होने के लिए, हमें अब todosData की स्थिति में todosData में जो कुछ संग्रहीत किया जाता है, todosData डालने की आवश्यकता है।

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

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

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

पाठ 30. रिएक्ट में घटनाओं को संभालना

→ मूल

इवेंट हैंडलिंग वह है जो वेब एप्लिकेशन को ड्राइव करता है और जो उन्हें साधारण स्थैतिक वेबसाइटों से अलग करता है। रीऐक्ट में इवेंट हैंडलिंग काफी सरल है, यह बहुत ही समान है कि कैसे घटनाओं को नियमित HTML में संसाधित किया जाता है। उदाहरण के लिए, रिएक्ट में onSubmit और onSubmit ईवेंट हैंडलर हैं, जो onSubmit और onSubmit के रूप में प्रस्तुत किए गए समान HTML तंत्र के समान हैं, न केवल नामों के संदर्भ में (रिएक्ट में, हालांकि, उनके नाम एक ऊंट शैली का उपयोग करके बनाए गए हैं), लेकिन यह भी वे उनके साथ कैसे काम करते हैं।

यहां हम उदाहरणों पर विचार करेंगे, एक मानक एप्लिकेशन के साथ प्रयोग करके create-react-app , जिसका App घटक फ़ाइल में निम्न कोड शामिल हैं:

 import React from "react" function App() {   return (       <div>           <img src="https://www.fillmurray.com/200/100"/>           <br />           <br />           <button>Click me</button>       </div>   ) } export default App 

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


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

इससे पहले कि हम setState() पद्धति का उपयोग करके घटकों की स्थिति को संशोधित करने के बारे में गंभीरता से बात कर setState() , हमें रिएक्ट में घटनाओं और घटना से निपटने की आवश्यकता है। इवेंट प्रोसेसिंग तंत्र एप्लिकेशन के उपयोगकर्ता को उसके साथ बातचीत करने की अनुमति देता है। एक अनुप्रयोग, उदाहरण के लिए, ईवेंट को click या hover करने के लिए, इन घटनाओं के होने पर कुछ क्रियाओं का प्रदर्शन कर सकता है।

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

उदाहरण के लिए, HTML के माध्यम से इसे संभव बनाने के लिए कि एक निश्चित बटन पर क्लिक करके एक फ़ंक्शन किया जाता है, आप इस निर्माण का उपयोग कर सकते हैं (बशर्ते कि यह फ़ंक्शन मौजूद है और सुलभ है):

 <button onclick="myFunction()">Click me</button> 

रिएक्ट में, जैसा कि पहले ही उल्लेख किया गया है, इवेंट हैंडलर्स के पास ऊँट-शैली के नियमों के अनुसार तैयार किए गए नाम हैं, onclick , onclick यहाँ पर क्लिक करेगा। यही बात onMouseOver ईवेंट onMouseOver और अन्य हैंडलर के लिए भी सही है। इस परिवर्तन का कारण यह है कि यह एक इकाई नामकरण का उपयोग करता है जो जावास्क्रिप्ट के लिए सामान्य है।

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

 <button onClick={}>Click me</button> 

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

 <button onClick={() => console.log("I was clicked!")}>Click me</button> 

अब जब आप बटन पर क्लिक करते हैं, तो पाठ I was clicked! ।

एक स्वतंत्र फ़ंक्शन की घोषणा करके और घटक फ़ाइल कोड को निम्न फ़ॉर्म में लाकर समान प्रभाव प्राप्त किया जा सकता है:

 import React from "react" function handleClick() {   console.log("I was clicked") } function App() {   return (       <div>           <img src="https://www.fillmurray.com/200/100"/>           <br />           <br />           <button onClick={handleClick}>Click me</button>       </div>   ) } export default App 

प्रतिक्रिया द्वारा समर्थित घटनाओं की पूरी सूची के लिए, इस दस्तावेज़ पृष्ठ को देखें।

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

वास्तव में, इस समस्या को विभिन्न तरीकों से हल किया जा सकता है, हम onMouseOver ईवेंट के आधार पर इसके समाधान का प्रदर्शन करेंगे। जब यह घटना होती है, तो हम कंसोल में एक संदेश प्रदर्शित करेंगे। अब हमारा कोड कैसा दिखेगा:

 import React from "react" function handleClick() {   console.log("I was clicked") } function App() {   return (       <div>           <img onMouseOver={() => console.log("Hovered!")} src="https://www.fillmurray.com/200/100"/>           <br />           <br />           <button onClick={handleClick}>Click me</button>       </div>   ) } export default App 

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

हमेशा की तरह - हम आपको आज जो कुछ भी सीखा है, उसके साथ प्रयोग करने के लिए कुछ समय लेने की सलाह देते हैं।

परिणाम

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

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