From 6bf2280957e6c349b657d298dbf444fa134ddd07 Mon Sep 17 00:00:00 2001 From: Yash Date: Sun, 24 Mar 2019 19:54:56 +0530 Subject: [PATCH 01/13] [Translation] Line 11 - Initial Commit --- content/docs/handling-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 175303c24..aceec7b65 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -8,7 +8,7 @@ redirect_from: - "docs/events-ko-KR.html" --- -Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences: +React के एलिमेंट्स के साथ इवेंट्स हैंडल करना DOM के एलिमेंट्स को हैंडल करने जैसा ही है | इनमे खली कुछ सिंटैक्टिक अंतर हैं | * React events are named using camelCase, rather than lowercase. * With JSX you pass a function as the event handler, rather than a string. From 6df36d9d5dcc8bf324248750fdd9ea43ec9b1d70 Mon Sep 17 00:00:00 2001 From: Yash Date: Sat, 30 Mar 2019 22:52:31 +0530 Subject: [PATCH 02/13] [Translation] Till Line 24 --- content/docs/handling-events.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index aceec7b65..0d05560e8 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -10,10 +10,10 @@ redirect_from: React के एलिमेंट्स के साथ इवेंट्स हैंडल करना DOM के एलिमेंट्स को हैंडल करने जैसा ही है | इनमे खली कुछ सिंटैक्टिक अंतर हैं | -* React events are named using camelCase, rather than lowercase. -* With JSX you pass a function as the event handler, rather than a string. +* React के इवेंट्स का नाम लोअरकेस कि जगह camelCase में रक्खा जाता है | +* JSX के साथ आप एक function को एक string कि जगह इवेंट हैंडलर कि तरह उसमें पास करते हैं | -For example, the HTML: +उधारण के तौर पर, यह HTML code: ```html ``` -is slightly different in React: +React में थोडा अलग है: ```js{1} ``` -Another difference is that you cannot return `false` to prevent default behavior in React. You must call `preventDefault` explicitly. For example, with plain HTML, to prevent the default link behavior of opening a new page, you can write: +इसमें एक फरक यह भी है कि आप React में default behavior से बचने के लिए `false` रिटर्न नही कर सकते | आपको `preventDefault` अलग से बुलाना पड़ेगा | उदहारण के तौर पर, सिर्फ HTML के साथ अगर आपको link के नए पेज खोलने के default behavior से बचना है तो आप यह लिख सकते हैं: ```html - Click me + इसे दबाएँ ``` From d07d51d6b61c384e2e12da9c459236f6266d9705 Mon Sep 17 00:00:00 2001 From: Yash Date: Sun, 14 Apr 2019 22:13:06 +0530 Subject: [PATCH 04/13] [Translation] Section 1 Completed. --- content/docs/handling-events.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 786730103..c35c5fe7b 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -54,11 +54,11 @@ function ActionLink() { } ``` -Here, `e` is a synthetic event. React defines these synthetic events according to the [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/), so you don't need to worry about cross-browser compatibility. See the [`SyntheticEvent`](/docs/events.html) reference guide to learn more. +यहाँ पर 'e' एक synthetic इवेंट है | React इन synthetic इवेंट्स को [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/) के हिसाब से परिभाषित करता है, इसी लिए आपको cross-browser compatibility कि चिंता नही करनी चाहिए | और सिखने के लिए [`SyntheticEvent`](/docs/events.html) कि reference guide को देखें | -When using React you should generally not need to call `addEventListener` to add listeners to a DOM element after it is created. Instead, just provide a listener when the element is initially rendered. +React को इस्तेमाल करते वक्त आपको अगर किसी DOM एलिमेंट को बनाने के बाद उस में लिस्तेनेर्स तो आम तौर पर आपको `addEventListener` को कॉल करने कि जरुरत नही पड़ेगी | इसकी जगह पर आप listener उस एलिमेंट के सबसे पहली बार रेंडर होने पर ही दाल सकते है | -When you define a component using an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes), a common pattern is for an event handler to be a method on the class. For example, this `Toggle` component renders a button that lets the user toggle between "ON" and "OFF" states: +जब आप [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) से एक component डिफाइन करते हैं, तो इसके लिए event handler का उस class का method होना एक आम पैटर्न है | उद्धरण के तौर पर यह `Toggle` component एक बटन को रेंडर करता है जो कि आपको states को "ON" और "OFF" में बदलने देते हैं: ```js{6,7,10-14,18} class Toggle extends React.Component { From 80c15dad52122ab80988799c976142b0e9f21c5e Mon Sep 17 00:00:00 2001 From: Yash Date: Fri, 19 Apr 2019 09:41:20 +0530 Subject: [PATCH 05/13] [Review] Till Line 61 --- content/docs/handling-events.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index c35c5fe7b..3ede043e4 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -8,10 +8,10 @@ redirect_from: - "docs/events-ko-KR.html" --- -React के एलिमेंट्स के साथ इवेंट्स हैंडल करना DOM के एलिमेंट्स को हैंडल करने जैसा ही है | इनमे खली कुछ सिंटैक्टिक अंतर हैं | +React के एलिमेंट्स के साथ इवेंट्स हैंडल करना DOM के एलिमेंट्स को हैंडल करने जैसा ही है । इनमे खाली कुछ सिंटैक्टिक अंतर हैं । -* React के इवेंट्स का नाम लोअरकेस कि जगह camelCase में रक्खा जाता है | -* JSX के साथ आप एक function को एक string कि जगह इवेंट हैंडलर कि तरह उसमें पास करते हैं | +* React के इवेंट्स का नाम lowercase कि जगह camelCase में रक्खा जाता है । +* JSX के साथ, आप एक function को इवेंट हैंडलर कि तरह पास करते हैं, न कि एक string को । उधारण के तौर पर, यह HTML code: @@ -29,7 +29,7 @@ React में थोडा अलग है: ``` -इसमें एक फरक यह भी है कि आप React में default behavior से बचने के लिए `false` रिटर्न नही कर सकते | आपको `preventDefault` अलग से बुलाना पड़ेगा | उदहारण के तौर पर, सिर्फ HTML के साथ अगर आपको link के नए पेज खोलने के default behavior से बचना है तो आप यह लिख सकते हैं: +इसमें एक फरक यह भी है कि आप React में default behavior से बचने के लिए `false` रिटर्न नही कर सकते । आपको `preventDefault` अलग से कॉल करना पड़ेगा । उदहारण के तौर पर, अगर आप किसी HTML डॉक्यूमेंट कि लिंक के दुसरे पन्ने को खोलने के डिफ़ॉल्ट बेहेवियर से बचना चाहते हैं तो आप यह लिख सकते हैं: ```html @@ -54,11 +54,11 @@ function ActionLink() { } ``` -यहाँ पर 'e' एक synthetic इवेंट है | React इन synthetic इवेंट्स को [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/) के हिसाब से परिभाषित करता है, इसी लिए आपको cross-browser compatibility कि चिंता नही करनी चाहिए | और सिखने के लिए [`SyntheticEvent`](/docs/events.html) कि reference guide को देखें | +यहाँ पर `e` एक synthetic इवेंट है । React इन सिंथेटिक इवेंट्स को [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/) के हिसाब से परिभाषित करता है, इसी लिए आपको cross-browser compatibility कि चिंता नही करनी चाहिए । और सिखने के लिए [`SyntheticEvent`](/docs/events.html)की रिफरेन्स गाइड को देखें । -React को इस्तेमाल करते वक्त आपको अगर किसी DOM एलिमेंट को बनाने के बाद उस में लिस्तेनेर्स तो आम तौर पर आपको `addEventListener` को कॉल करने कि जरुरत नही पड़ेगी | इसकी जगह पर आप listener उस एलिमेंट के सबसे पहली बार रेंडर होने पर ही दाल सकते है | +React को इस्तेमाल करते वक्त आपको ज्यादातर `addEventListener` कि किसी DOM एलिमेंट में लिस्टनर ऐड करने के बाद कॉल करने की ज़रूरत नहीं पड़ेगी । इसकी जगह पर आप listener उस एलिमेंट पर तब ऐड कर सकते हैं जब वो इनिश्यली रेंडर होता है । -जब आप [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) से एक component डिफाइन करते हैं, तो इसके लिए event handler का उस class का method होना एक आम पैटर्न है | उद्धरण के तौर पर यह `Toggle` component एक बटन को रेंडर करता है जो कि आपको states को "ON" और "OFF" में बदलने देते हैं: +जब आप [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) से एक कौम्पोनॅन्ट डिफाइन करते हैं, तो इसके लिए इवेंट हैंडलर को उस क्लास का मेथड होना एक आम पैटर्न है । उद्धरण के तौर पर यह `Toggle` कौम्पोनॅन्ट एक बटन को रेंडर करता है जो यूजर को states को "ON" और "OFF" में बदलने देते हैं: ```js{6,7,10-14,18} class Toggle extends React.Component { From 2515e95a7d870a9bfdefe64a61fedf6e2e1dc682 Mon Sep 17 00:00:00 2001 From: Yash Date: Sun, 19 May 2019 22:20:53 +0530 Subject: [PATCH 06/13] [Translation] Till Line 100 --- content/docs/handling-events.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 3ede043e4..a249ab1d8 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -91,13 +91,13 @@ ReactDOM.render( ); ``` -[**Try it on CodePen**](https://codepen.io/gaearon/pen/xEmzGg?editors=0010) +[**इससे CodePen पर इस्तेमाल करें**](https://codepen.io/gaearon/pen/xEmzGg?editors=0010) -You have to be careful about the meaning of `this` in JSX callbacks. In JavaScript, class methods are not [bound](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) by default. If you forget to bind `this.handleClick` and pass it to `onClick`, `this` will be `undefined` when the function is actually called. +JSX callbacks आपको `this` के मतलब के साथ ध्यानपूर्वक रहना चाहिए । जावास्क्रिप्ट में class मेथड्स पहले से [bound](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) नहीं होते । अगर आप `this.handleClick` को bind करना भूल जाते हैं और उसे `onClick` पर पास कर देते हैं तो, `this` function के बुलाने पर `undefined` हो जाता है । -This is not React-specific behavior; it is a part of [how functions work in JavaScript](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generally, if you refer to a method without `()` after it, such as `onClick={this.handleClick}`, you should bind that method. +यह बर्ताव React कि वजेह से नहीं होता बल्कि यह [जावास्क्रिप्ट के functions के काम करने के तरीके का एक भाग है ](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). आम तौर पर अगर आप किसी मेथड को बिना `()` को उसके बाद में लगाये refer करते है, जैसे, `onClick={this.handleClick}` तो आपको वो मेथड bind करना चाहिए । -If calling `bind` annoys you, there are two ways you can get around this. If you are using the experimental [public class fields syntax](https://babeljs.io/docs/plugins/transform-class-properties/), you can use class fields to correctly bind callbacks: +अगर `bind` का बार बार कॉल करना आपको परेशान करता है, तो इससे बचने के आपके पास दो तरीके हैं । अगर आप experimental [public class फ़ील्ड्स सिंटेक्स](https://babeljs.io/docs/plugins/transform-class-properties/) इस्तेमाल कर रहे हैं, तो आप class फ़ील्ड्स का इस्तेमाल करके callbacks को सही से bind कर सकते हैं: ```js{2-6} class LoggingButton extends React.Component { From 0f25b9392fe7246ec644792e746857172724f3bd Mon Sep 17 00:00:00 2001 From: Yash Date: Sat, 5 Oct 2019 21:19:10 +0530 Subject: [PATCH 07/13] [Review] 19/05/19 --- content/docs/handling-events.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index a249ab1d8..ac1615395 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -11,7 +11,7 @@ redirect_from: React के एलिमेंट्स के साथ इवेंट्स हैंडल करना DOM के एलिमेंट्स को हैंडल करने जैसा ही है । इनमे खाली कुछ सिंटैक्टिक अंतर हैं । * React के इवेंट्स का नाम lowercase कि जगह camelCase में रक्खा जाता है । -* JSX के साथ, आप एक function को इवेंट हैंडलर कि तरह पास करते हैं, न कि एक string को । +* JSX का उपयोग करते समय, आप एक function को string की जगह इवेंट हैंडलर में पास करते हैं । उधारण के तौर पर, यह HTML code: @@ -54,7 +54,7 @@ function ActionLink() { } ``` -यहाँ पर `e` एक synthetic इवेंट है । React इन सिंथेटिक इवेंट्स को [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/) के हिसाब से परिभाषित करता है, इसी लिए आपको cross-browser compatibility कि चिंता नही करनी चाहिए । और सिखने के लिए [`SyntheticEvent`](/docs/events.html)की रिफरेन्स गाइड को देखें । +यहाँ पर `e` एक सिंथेटिक इवेंट है । React इन सिंथेटिक इवेंट्स को [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/) के हिसाब से परिभाषित करता है, इसी लिए आपको cross-browser compatibility कि चिंता नही करनी चाहिए । और सिखने के लिए [`SyntheticEvent`](/docs/events.html)की रिफरेन्स गाइड को देखें । React को इस्तेमाल करते वक्त आपको ज्यादातर `addEventListener` कि किसी DOM एलिमेंट में लिस्टनर ऐड करने के बाद कॉल करने की ज़रूरत नहीं पड़ेगी । इसकी जगह पर आप listener उस एलिमेंट पर तब ऐड कर सकते हैं जब वो इनिश्यली रेंडर होता है । From 620c5cdc72513b4f9e81949eb2653d0b5b88b8ed Mon Sep 17 00:00:00 2001 From: Yash Date: Sun, 6 Oct 2019 21:17:27 +0530 Subject: [PATCH 08/13] [Review] Added a space before a word. --- content/docs/handling-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index ac1615395..3385bb473 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -54,7 +54,7 @@ function ActionLink() { } ``` -यहाँ पर `e` एक सिंथेटिक इवेंट है । React इन सिंथेटिक इवेंट्स को [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/) के हिसाब से परिभाषित करता है, इसी लिए आपको cross-browser compatibility कि चिंता नही करनी चाहिए । और सिखने के लिए [`SyntheticEvent`](/docs/events.html)की रिफरेन्स गाइड को देखें । +यहाँ पर `e` एक सिंथेटिक इवेंट है । React इन सिंथेटिक इवेंट्स को [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/) के हिसाब से परिभाषित करता है, इसी लिए आपको cross-browser compatibility कि चिंता नही करनी चाहिए । और सिखने के लिए [`SyntheticEvent`](/docs/events.html) की रिफरेन्स गाइड को देखें । React को इस्तेमाल करते वक्त आपको ज्यादातर `addEventListener` कि किसी DOM एलिमेंट में लिस्टनर ऐड करने के बाद कॉल करने की ज़रूरत नहीं पड़ेगी । इसकी जगह पर आप listener उस एलिमेंट पर तब ऐड कर सकते हैं जब वो इनिश्यली रेंडर होता है । From 98f823b99584a4f0b25b0abb1ddc9da052347e56 Mon Sep 17 00:00:00 2001 From: Yash Date: Sun, 6 Oct 2019 23:32:55 +0530 Subject: [PATCH 09/13] [Translation] Handling Event till line 141 --- content/docs/handling-events.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 3385bb473..99370d613 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -117,9 +117,9 @@ class LoggingButton extends React.Component { } ``` -This syntax is enabled by default in [Create React App](https://github.com/facebookincubator/create-react-app). +यह सिंटैक्स [Create React App](https://github.com/facebookincubator/create-react-app) में by default पाया जाता है। -If you aren't using class fields syntax, you can use an [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) in the callback: +अगर आप class field सिंटैक्स नहीं इस्तेमाल कर रहें हैं तो आप callback में [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) का इस्तेमाल कर सकते हैं। ```js{7-9} class LoggingButton extends React.Component { @@ -138,7 +138,7 @@ class LoggingButton extends React.Component { } ``` -The problem with this syntax is that a different callback is created each time the `LoggingButton` renders. In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering. We generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem. +इस सिंटैक्स के साथ यह दिक्कत है की जितनी बार कोई अलग callback बनता है उतनी बार `LoggingButton` फिरसे render होता है। ज़्यादातर मामलो में इससे कोई समस्या नहीं होती है। लेकिन अगर इस callback को निचले कौम्पोनॅन्ट में पास किया जाता है तो हो सकता है की कौम्पोनॅन्ट को ज़्यादा री-रेंडरिंग करनी पड़े। हम आम तौर पर constructor को bind करने के लिए या class फील्ड सिंटैक्स के इस्तेमाल को भडावा देते हैं ताकि इस तरह की परफॉरमेंस की दिक्कते ना आए। ## Passing Arguments to Event Handlers {#passing-arguments-to-event-handlers} From 6bd8f7a3c1021c9cec196849000427a5ed68c4be Mon Sep 17 00:00:00 2001 From: Yash Date: Mon, 7 Oct 2019 01:14:24 +0530 Subject: [PATCH 10/13] [Review] 01 Till 141 --- content/docs/handling-events.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 99370d613..2a34bbdb9 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -117,9 +117,9 @@ class LoggingButton extends React.Component { } ``` -यह सिंटैक्स [Create React App](https://github.com/facebookincubator/create-react-app) में by default पाया जाता है। +यह सिंटैक्स [Create React App](https://github.com/facebookincubator/create-react-app) में डिफ़ॉल्ट रूप में पाया जाता है। -अगर आप class field सिंटैक्स नहीं इस्तेमाल कर रहें हैं तो आप callback में [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) का इस्तेमाल कर सकते हैं। +अगर आप class फील्ड सिंटैक्स नहीं इस्तेमाल कर रहें हैं तो आप callback में [एरो फंक्शन](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) का इस्तेमाल कर सकते हैं। ```js{7-9} class LoggingButton extends React.Component { @@ -138,7 +138,7 @@ class LoggingButton extends React.Component { } ``` -इस सिंटैक्स के साथ यह दिक्कत है की जितनी बार कोई अलग callback बनता है उतनी बार `LoggingButton` फिरसे render होता है। ज़्यादातर मामलो में इससे कोई समस्या नहीं होती है। लेकिन अगर इस callback को निचले कौम्पोनॅन्ट में पास किया जाता है तो हो सकता है की कौम्पोनॅन्ट को ज़्यादा री-रेंडरिंग करनी पड़े। हम आम तौर पर constructor को bind करने के लिए या class फील्ड सिंटैक्स के इस्तेमाल को भडावा देते हैं ताकि इस तरह की परफॉरमेंस की दिक्कते ना आए। +इस सिंटैक्स के साथ यह दिक्कत है की जितनी बार कोई अलग callback बनता है उतनी बार `LoggingButton` फिरसे रेंडर होता है। ज़्यादातर मामलो में इससे कोई समस्या नहीं होती है। लेकिन अगर इस callback को निचले कौम्पोनॅन्ट में पास किया जाता है तो हो सकता है की कौम्पोनॅन्ट को ज़्यादा री-रेंडरिंग करनी पड़े। हम आम तौर पर constructor को bind करने के लिए या class फील्ड सिंटैक्स के इस्तेमाल को बढ़ावा देते हैं ताकि इस तरह की परफॉरमेंस की दिक्कते ना आए। ## Passing Arguments to Event Handlers {#passing-arguments-to-event-handlers} From 38ad67d663280e18b27250d4150dd1daffe4b7cb Mon Sep 17 00:00:00 2001 From: Yash Date: Mon, 7 Oct 2019 20:56:41 +0530 Subject: [PATCH 11/13] [Translation] Till line 154 | Completed --- content/docs/handling-events.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 2a34bbdb9..edb3c433c 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -140,15 +140,15 @@ class LoggingButton extends React.Component { इस सिंटैक्स के साथ यह दिक्कत है की जितनी बार कोई अलग callback बनता है उतनी बार `LoggingButton` फिरसे रेंडर होता है। ज़्यादातर मामलो में इससे कोई समस्या नहीं होती है। लेकिन अगर इस callback को निचले कौम्पोनॅन्ट में पास किया जाता है तो हो सकता है की कौम्पोनॅन्ट को ज़्यादा री-रेंडरिंग करनी पड़े। हम आम तौर पर constructor को bind करने के लिए या class फील्ड सिंटैक्स के इस्तेमाल को बढ़ावा देते हैं ताकि इस तरह की परफॉरमेंस की दिक्कते ना आए। -## Passing Arguments to Event Handlers {#passing-arguments-to-event-handlers} +## इवेंट हैंडलर में आर्ग्यूमेंट्स देना {#passing-arguments-to-event-handlers} -Inside a loop it is common to want to pass an extra parameter to an event handler. For example, if `id` is the row ID, either of the following would work: +एक loop के अंदर अक्सर लोग इवेंट हैंडलर में एक एक्स्ट्रा पैरामीटर देना चाहते हैं। उदहारण के तौर पर अगर `id` एक row की id है तो इनमे से कोई भी काम करजाएगा: ```js ``` -The above two lines are equivalent, and use [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) and [`Function.prototype.bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) respectively. +ऊपर की दोनों लिने एक ही काम करती हैं और [एरो फंक्शन्स](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) और [`Function.prototype.bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) का क्रमशः इस्तेमाल करती हैं। -In both cases, the `e` argument representing the React event will be passed as a second argument after the ID. With an arrow function, we have to pass it explicitly, but with `bind` any further arguments are automatically forwarded. +इन दोनों ही मामलो में `e` आर्गुमेंट जो की React इवेंट को दिखाता है वो एक दूसरे आर्गुमेंट की तरह ID के बाद pass किया जाएगा। एरो फंक्शन्स के साथ हमे इसे स्पष्ठ रूप में पास करना होगा, लेकिन `bind` के साथ कोई भी अतिरिक्त आर्ग्यूमेंट्स खुद ब खुद आगे चले जाते हैं। From 087478e4a55e5953b871f1e0b15284ec5e59e944 Mon Sep 17 00:00:00 2001 From: Yash Date: Mon, 7 Oct 2019 23:22:30 +0530 Subject: [PATCH 12/13] [Review] 01 Corrected till line 154 --- content/docs/handling-events.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index edb3c433c..693b31c13 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -142,13 +142,13 @@ class LoggingButton extends React.Component { ## इवेंट हैंडलर में आर्ग्यूमेंट्स देना {#passing-arguments-to-event-handlers} -एक loop के अंदर अक्सर लोग इवेंट हैंडलर में एक एक्स्ट्रा पैरामीटर देना चाहते हैं। उदहारण के तौर पर अगर `id` एक row की id है तो इनमे से कोई भी काम करजाएगा: +एक loop के अंदर अक्सर लोग इवेंट हैंडलर में एक एक्स्ट्रा पैरामीटर देना चाहते हैं। उदहारण के तौर पर अगर `id` एक row की id है तो इनमे से कोई भी काम कर जाएगा: ```js ``` -ऊपर की दोनों लिने एक ही काम करती हैं और [एरो फंक्शन्स](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) और [`Function.prototype.bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) का क्रमशः इस्तेमाल करती हैं। +ऊपर की दोनों लाइने एक ही काम करती हैं और [एरो फंक्शन्स](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) और [`Function.prototype.bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) का क्रमशः इस्तेमाल करती हैं। इन दोनों ही मामलो में `e` आर्गुमेंट जो की React इवेंट को दिखाता है वो एक दूसरे आर्गुमेंट की तरह ID के बाद pass किया जाएगा। एरो फंक्शन्स के साथ हमे इसे स्पष्ठ रूप में पास करना होगा, लेकिन `bind` के साथ कोई भी अतिरिक्त आर्ग्यूमेंट्स खुद ब खुद आगे चले जाते हैं। From cf88b1f82cac65f0c0a1205dbbd0ce982b630e88 Mon Sep 17 00:00:00 2001 From: Yash Date: Sat, 16 Nov 2019 22:11:00 +0530 Subject: [PATCH 13/13] [Review] Till line 61 --- content/docs/handling-events.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index 693b31c13..7db119109 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -8,10 +8,10 @@ redirect_from: - "docs/events-ko-KR.html" --- -React के एलिमेंट्स के साथ इवेंट्स हैंडल करना DOM के एलिमेंट्स को हैंडल करने जैसा ही है । इनमे खाली कुछ सिंटैक्टिक अंतर हैं । +React के एलिमेंट्स के साथ इवेंट्स हैंडल करना DOM एलिमेंट्स के इवेंट्स को हैंडल करने जैसा ही है । इनमे खाली कुछ सिंटैक्टिक अंतर हैं । * React के इवेंट्स का नाम lowercase कि जगह camelCase में रक्खा जाता है । -* JSX का उपयोग करते समय, आप एक function को string की जगह इवेंट हैंडलर में पास करते हैं । +* JSX का उपयोग करते समय, आप एक function को इवेंट हैंडलर में पास करते हैं, न की एक string को । उधारण के तौर पर, यह HTML code: @@ -54,11 +54,11 @@ function ActionLink() { } ``` -यहाँ पर `e` एक सिंथेटिक इवेंट है । React इन सिंथेटिक इवेंट्स को [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/) के हिसाब से परिभाषित करता है, इसी लिए आपको cross-browser compatibility कि चिंता नही करनी चाहिए । और सिखने के लिए [`SyntheticEvent`](/docs/events.html) की रिफरेन्स गाइड को देखें । +यहाँ पर `e` एक सिंथेटिक इवेंट है । React इन सिंथेटिक इवेंट्स को [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/) के हिसाब से परिभाषित करता है, ताकी आपको cross-browser compatibility कि चिंता नही करनी पड़े । और सीखने के लिए [`SyntheticEvent`](/docs/events.html) की रिफरेन्स गाइड को देखें । -React को इस्तेमाल करते वक्त आपको ज्यादातर `addEventListener` कि किसी DOM एलिमेंट में लिस्टनर ऐड करने के बाद कॉल करने की ज़रूरत नहीं पड़ेगी । इसकी जगह पर आप listener उस एलिमेंट पर तब ऐड कर सकते हैं जब वो इनिश्यली रेंडर होता है । +React को इस्तेमाल करते वक्त आम तौर पर आपको `addEventListener` को एक DOM एलिमेंट पर कॉल करने की ज़रूरत नहीं पड़ेगी । इसकी जगह पर आप listener उस एलिमेंट पर तब ऐड कर सकते हैं जब वो इनिश्यली रेंडरा हो रहा हो । -जब आप [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) से एक कौम्पोनॅन्ट डिफाइन करते हैं, तो इसके लिए इवेंट हैंडलर को उस क्लास का मेथड होना एक आम पैटर्न है । उद्धरण के तौर पर यह `Toggle` कौम्पोनॅन्ट एक बटन को रेंडर करता है जो यूजर को states को "ON" और "OFF" में बदलने देते हैं: +जब आप [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) से एक कौम्पोनॅन्ट डिफाइन करते हैं, तो इसके लिए इवेंट हैंडलर को उस क्लास का मेथड होना एक आम पैटर्न है । उद्धरण के तौर पर `Toggle` कॉम्पोनेन्ट एक बटन को रेंडर करता है, ये बटन यूज़र को "ON" और "OFF" states को बदलने देता है: ```js{6,7,10-14,18} class Toggle extends React.Component {