Skip to content

[Translation] Handling Events #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 25 commits into from
Closed
Changes from 5 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
6bf2280
[Translation] Line 11 - Initial Commit
niyabits Mar 24, 2019
4e29e91
Merge branch 'master' into patch-2
arshadkazmi42 Mar 29, 2019
6df36d9
[Translation] Till Line 24
niyabits Mar 30, 2019
cbe5eab
[Translation] Till Line 36
niyabits Apr 5, 2019
d07d51d
[Translation] Section 1 Completed.
niyabits Apr 14, 2019
e025f13
Merge branch 'master' into patch-2
arshadkazmi42 Apr 15, 2019
80c15da
[Review] Till Line 61
niyabits Apr 19, 2019
8a73261
Merge branch 'master' into patch-2
arshadkazmi42 Apr 19, 2019
6705144
Merge branch 'master' into patch-2
arshadkazmi42 May 5, 2019
0ae1332
Merge branch 'master' into patch-2
arshadkazmi42 May 8, 2019
2515e95
[Translation] Till Line 100
niyabits May 19, 2019
52ec343
Merge branch 'master' into patch-2
arshadkazmi42 May 19, 2019
f3d0d3b
Merge branch 'master' into patch-2
arshadkazmi42 Sep 3, 2019
0f25b93
[Review] 19/05/19
niyabits Oct 5, 2019
577069f
Merge branch 'master' into patch-2
arshadkazmi42 Oct 5, 2019
620c5cd
[Review] Added a space before a word.
niyabits Oct 6, 2019
98f823b
[Translation] Handling Event till line 141
niyabits Oct 6, 2019
6bd8f7a
[Review] 01 Till 141
niyabits Oct 6, 2019
38ad67d
[Translation] Till line 154 | Completed
niyabits Oct 7, 2019
e376b7e
Merge branch 'master' into patch-2
arshadkazmi42 Oct 7, 2019
087478e
[Review] 01 Corrected till line 154
niyabits Oct 7, 2019
9cec71a
Merge branch 'master' into patch-2
saranshkataria Oct 14, 2019
cf88b1f
[Review] Till line 61
niyabits Nov 16, 2019
69ddcf2
Merge branch 'master' into patch-2
saranshkataria Nov 17, 2019
398b05e
Merge branch 'master' into patch-2
saranshkataria Dec 3, 2019
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions content/docs/handling-events.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,32 +8,32 @@ 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.
* React के इवेंट्स का नाम लोअरकेस कि जगह camelCase में रक्खा जाता है |
* JSX के साथ आप एक function को एक string कि जगह इवेंट हैंडलर कि तरह उसमें पास करते हैं |

For example, the HTML:
उधारण के तौर पर, यह HTML code:

```html
<button onclick="activateLasers()">
Activate Lasers
</button>
```

is slightly different in React:
React में थोडा अलग है:

```js{1}
<button onClick={activateLasers}>
Activate Lasers
</button>
```

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
<a href="#" onclick="console.log('The link was clicked.'); return false">
Click me
इसे दबाएँ
</a>
```

Expand All @@ -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 {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

translate comments as well?

Expand Down