[Translation] Handling Events by niyabits · Pull Request #27 · reactjs/hi.react.dev
- 1. First Section
- 2. Try it on CodePen
- 3. Passing Arguments to Event Handlers {#passing-arguments-to-event-handlers}
niyabits
changed the title
[Translation] Line 11 - Initial Commit
[Translation] Handling Events
@yashguptaz Just want to check in, if you are waiting for review for this. I would suggest have at least 1 section translated for review.
I will proceed with this tomorrow, I'm busy with some client work right now.
@yashguptaz Just ping me whenever you want me to start the review
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good start.
I have added a couple of comments.
We can close on the review of this section, then you can proceed with further translations
@yashguptaz There's a couple of things missed, once you are done with those, you can continue working on rest of the page translation
@yashguptaz Any updates on this?
No, I'm busy these days that's why I am not able to do any further translations.
@arshadkazmi42 Can you review please?
I am free now for a few days, let's get this done.
Sorry for inactivity.
@yashguptaz any updates on this?
@yashguptaz let us know if you will be able to spare time to complete this, else we will be closing this PR out
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great work. Thank you for working on all those feedbacks 👍
@saranshkataria you can start with the 2nd phase of the review.
@saranshkataria are you done with reviewing? Please do it fast, I have to manage it all with my school and coaching.
| * React events are named using camelCase, rather than lowercase. | ||
| * With JSX you pass a function as the event handler, rather than a string. | ||
| * React के इवेंट्स का नाम lowercase कि जगह camelCase में रक्खा जाता है । | ||
| * JSX का उपयोग करते समय, आप एक function को string की जगह इवेंट हैंडलर में पास करते हैं । |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
changes the context of the sentence, rewrite it in a better way perhaps?
added comments till line 94
| ``` | ||
|
|
||
| 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` एक सिंथेटिक इवेंट है । React इन सिंथेटिक इवेंट्स को [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/) के हिसाब से परिभाषित करता है, ताकी आपको cross-browser compatibility कि चिंता नही करनी पड़े । और सीखने के लिए [`SyntheticEvent`](/docs/events.html) की रिफरेन्स गाइड को देखें । |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
नही करनी पड़े -> na karni
| जब आप [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 { |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
translate comments as well?
| [**इससे 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` हो जाता है । |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
JSX callbacks आपको this के मतलब के साथ ध्यानपूर्वक रहना चाहिए । -> incorrect sentence structure
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
बुलाने पर undefined हो जाता है । -> could be worded better?
| 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 करना चाहिए । |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
कि वजेह -> spelling of both words is incorrect
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
आम तौर पर अगर आप किसी मेथड को बिना () को उसके बाद में लगाये refer करते है, जैसे, onClick={this.handleClick} तो आपको वो मेथड bind करना चाहिए । revisit sentence structure
| अगर `bind` का बार बार कॉल करना आपको परेशान करता है, तो इससे बचने के आपके पास दो तरीके हैं । अगर आप experimental [public class फ़ील्ड्स सिंटेक्स](https://babeljs.io/docs/plugins/transform-class-properties/) इस्तेमाल कर रहे हैं, तो आप class फ़ील्ड्स का इस्तेमाल करके callbacks को सही से bind कर सकते हैं: | ||
|
|
||
| ```js{2-6} | ||
| class LoggingButton extends React.Component { |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
translate comments?
| ``` | ||
|
|
||
| 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) में डिफ़ॉल्ट रूप में पाया जाता है। |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
में डिफ़ॉल्ट रूप में पाया जाता है। -> better wording?
| अगर आप class फील्ड सिंटैक्स नहीं इस्तेमाल कर रहें हैं तो आप callback में [एरो फंक्शन](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) का इस्तेमाल कर सकते हैं। | ||
|
|
||
| ```js{7-9} | ||
| class LoggingButton extends React.Component { |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
comments again
added comments till {#passing-arguments-to-event-handlers}
Closing due to inactivity
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters