Skip to content

Commit 2c293dc

Browse files
Revised
1 parent 789e0cc commit 2c293dc

File tree

1 file changed

+16
-16
lines changed

1 file changed

+16
-16
lines changed

content/docs/handling-events.md

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ redirect_from:
88
- "docs/events-ko-KR.html"
99
---
1010

11-
React ile olayların yönetimi, DOM elementlerindeki olay yönetimi ile oldukça benzerdir. Bazı söz dizimsel olarak farklılıklar bulunmaktadır:
11+
React'teki olay yönetimi, DOM elementlerindeki olay yönetimi ile oldukça benzerdir. Sadece, bazı küçük farklılıklar bulunmaktadır:
1212

1313
* Olay isimleri, DOM'da lowercase iken, React'te camelCase olarak adlandırılır.
14-
* DOM'da fonksiyon isimleri, ilgili olaya string olarak atanırken, JSX'te fonksiyon olarak atanır.
14+
* DOM'da fonksiyon isimleri, ilgili olaya string olarak atanırken, JSX'te direkt fonksiyon olarak atanır.
1515

1616
Örneğin HTML'de aşağıdaki gibi olan kod:
1717

@@ -29,15 +29,15 @@ React'te biraz daha farklıdır:
2929
</button>
3030
```
3131

32-
React'teki diğer bir farklılık ise, olaylardaki varsayılan davranışı, `false` değeri döndürerek engelleyemezsiniz. Bunun için `preventDefault` şeklinde yazarak tarayıcıya belirtmeniz gerekir. Örneğin düz bir HTML kodunda, bir `<a>` elementinin yeni bir sayfayı açmasını engellemek için aşağıdaki şekilde yazabilirsiniz:
32+
React'teki diğer bir farklılık ise, olaylardaki varsayılan davranış, `false` değeri döndürülerek engellenemezdir. Bunun için `preventDefault` şeklinde açık olarak yazarak tarayıcıya belirtmeniz gerekir. Örneğin düz bir HTML kodunda, bir `<a>` elementinin yeni bir sayfayı açmasını engellemek için aşağıdaki şekilde yazabilirsiniz:
3333

3434
```html
3535
<a href="#" onclick="console.log('The link was clicked.'); return false">
3636
Click me
3737
</a>
3838
```
3939

40-
React'te ise varsayılan link davranışını `e.preventDefault()` kodu ile engellemeniz gerekir:
40+
React'te ise varsayılan `<a>` elementi davranışını `e.preventDefault()` kodu ile engellemeniz gerekir:
4141

4242
```js{2-5,8}
4343
function ActionLink() {
@@ -54,11 +54,11 @@ function ActionLink() {
5454
}
5555
```
5656

57-
Burada `e`, bir sentetik olaydır. React bu sentetik olayları [W3C şarnamesine](https://www.w3.org/TR/DOM-Level-3-Events/) göre tanımlar. Bu sayede tarayıcılar arası uyumsuzluk problemi oluşmaz. Daha fazla bilgi edinmek için [`Sentetik Olaylar`](/docs/events.html) rehberini inceleyebilirsiniz.
57+
Burada `e`, bir sentetik olaydır. React, bu sentetik olayları [W3C şarnamesine](https://www.w3.org/TR/DOM-Level-3-Events/) göre tanımlar. Bu sayede, tarayıcılar arası uyumsuzluk problemi oluşmaz. Bu konuda daha fazla bilgi edinmek için [`Sentetik Olaylar`](/docs/events.html) rehberini inceleyebilirsiniz.
5858

59-
React ile kod yazarken, bir DOM elementi oluşturulduktan sonra ona bir listener atamak için, `addEventListener` fonksiyonunu çağırmanıza gerek yoktur. Bunun yerine, ilgili element ilk kez render olduğunda ona bir listener atamanız doğru olacaktır.
59+
React ile kod yazarken, bir DOM elementi oluşturulduktan sonra ona bir listener atamak için, `addEventListener` fonksiyonunu çağırmanıza gerek yoktur. Bunun yerine `render` fonksiyonunda, ilgili element ilk kez render olduğunda ona bir listener atamanız doğru olacaktır.
6060

61-
[ES6 sınıfı](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) kullanarak bir bileşen oluşturduğunuzda, ilgili olayın oluşturulması için en yaygın yaklaşım, o sınıf içerisinde bir metodun tanımlanmasıdır. Örneğin aşağıdaki `Toggle` bileşeni, "ON" ve "OFF" durumlarının gerçekleştirilmesi için bir butonu render etmektedir:
61+
[ES6 sınıfı](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) kullanarak bir bileşen oluşturulduğunda, ilgili olayın tanımlanması için en yaygın yaklaşım, ilgili metodun o sınıf içerisinde oluşturulmasıdır. Örneğin aşağıdaki `Toggle` bileşeni, "ON" ve "OFF" durumlarının gerçekleştirilmesi için bir butonu render etmektedir:
6262

6363
```js{6,7,10-14,18}
6464
class Toggle extends React.Component {
@@ -93,16 +93,16 @@ ReactDOM.render(
9393

9494
[**CodePen'de deneyin**](http://codepen.io/gaearon/pen/xEmzGg?editors=0010)
9595

96-
JSX callback'lerinde `this` kullanırken dikkat etmeniz gerekmektedir. JavaScript'te, sınıf metotları varsayılan olarak [bağlanmazlar](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind). `this.handleClick`'i `bind(this)` ile bağlamayı unutarak `onClick`'e yazarsanız, fonksiyon çağrıldığında `this` değişkeni `undefined` hale gelecek ve hatalara sebep olacaktır.
96+
JSX callback'lerinde `this` kullanırken dikkat etmeniz gerekmektedir. Çünkü JavaScript'te, sınıf metotları varsayılan olarak `this`'e [bağlı değillerdir](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind). Bu nedenle, `this.handleClick`'i `bind(this)` ile bağlamayı unutarak `onClick`'e yazarsanız, fonksiyon çağrıldığında `this` değişkeni `undefined` hale gelecek ve hatalara sebep olacaktır.
9797

98-
Bu durum React'e özgü bir davranış biçimi değildir. Aslen, [fonksiyonların JavaScript'te nasıl çalıştığı](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/) ile ilgilidir. Genellikle, `onClick={this.handleClick}` gibi bir metodu parantez kullanmadan `()` çağırırken, o metodu `bind` etmeniz gerekir.
98+
Bu durum, React'e özgü bir davranış biçimi değildir. Aslen, [fonksiyonların JavaScript'te nasıl çalıştığı](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/) ile ilgilidir. Genellikle, `onClick={this.handleClick}` gibi bir metot, parantez kullanmadan çağırırken, o metodun `bind` edilmesi gerekir.
9999

100-
Eğer sürekli her metot için `bind` ekleyleyip durmayı istemiyorsanız, bunun yerine farklı yöntemler de kullanabilirsiniz. Eğer henüz deneysel bir özellik olan [public class fields](https://babeljs.io/docs/plugins/transform-class-properties/) yöntemini kullanırsanız, callback'leri bağlamak için sınıf değişkenlerini kullanabilirsiniz:
100+
Eğer sürekli her metot için `bind` eklemek istemiyorsanız, bunun yerine farklı yöntemler de kullanabilirsiniz. Örneğin, henüz deneysel bir özellik olan [public class fields](https://babeljs.io/docs/plugins/transform-class-properties/) yöntemini kullanırsanız, callback'leri bağlamak için sınıf değişkenlerini kullanabilirsiniz:
101101

102102
```js{2-6}
103103
class LoggingButton extends React.Component {
104-
// This syntax ensures `this` is bound within handleClick.
105-
// Warning: this is *experimental* syntax.
104+
// Bu yazım şekli, `this`'in handleClick içerisinde bağlanmasını sağlar.
105+
// Uyarı: henüz *deneysel* bir özelliktir.
106106
handleClick = () => {
107107
console.log('this is:', this);
108108
}
@@ -117,9 +117,9 @@ class LoggingButton extends React.Component {
117117
}
118118
```
119119

120-
Bu yöntem, [Create React App](https://github.com/facebookincubator/create-react-app) ile oluşturulan geliştirim ortamında, varsayılan olarak gelir. Böylece hiçbir ayarlama yapmadan bu yöntemi kullanabilirsiniz.
120+
Bu yöntem, [Create React App](https://github.com/facebookincubator/create-react-app) ile oluşturulan geliştirim ortamında varsayılan olarak gelir. Böylece hiçbir ayarlama yapmadan kullanabilirsiniz.
121121

122-
Eğer bu yöntemi kullanmak istemiyorsanuz, callback içerisinde [ok fonksiyonunu](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) kullanabilirsiniz:
122+
Eğer bu yöntemi kullanmak istemiyorsanuz, callback içerisinde [ok fonksiyonunu](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) da kullanabilirsiniz:
123123

124124
```js{7-9}
125125
class LoggingButton extends React.Component {
@@ -128,7 +128,7 @@ class LoggingButton extends React.Component {
128128
}
129129
130130
render() {
131-
// This syntax ensures `this` is bound within handleClick
131+
// Bu yazım şekli, `this`'in handleClick içerisinde bağlanmasını sağlar.
132132
return (
133133
<button onClick={(e) => this.handleClick(e)}>
134134
Click me
@@ -138,7 +138,7 @@ class LoggingButton extends React.Component {
138138
}
139139
```
140140

141-
Bu yöntemin bir dezavantajı vardır. `LoggingButton` bileşeni her render olduğu anda yeni bir callback oluşturulur. Bu olay birçok durumda bir sorun teşkil etmez. Ancak bu callback, prop aracılığıyla alt bileşenlere aktarılırsa, bu bileşenler fazladan render edilebilir. Bu tarz problemlerle karşılaşmamak için, binding işleminin ya sınıfın constructorın'da ya da class fields yöntemi ile yapılmasını öneririz.
141+
Fakat bu yöntemin bir dezavantajı vardır. `LoggingButton` bileşeni her render edildiğinde, yeni bir callback oluşturulur. Birçok durumda bu olay bir sorun teşkil etmez. Ancak ilgili callback, prop aracılığıyla alt bileşenlere aktarılırsa, bu bileşenler fazladan render edilebilir. Bu tarz problemlerle karşılaşmamak için, binding işleminin ,ya sınıfın constructorın'da ya da class fields yöntemi ile yapılmasını öneririz.
142142

143143
## Olay Fonksiyonlarına Parametre Gönderimi {#passing-arguments-to-event-handlers}
144144

0 commit comments

Comments
 (0)