You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/handling-events.md
+16-16Lines changed: 16 additions & 16 deletions
Original file line number
Diff line number
Diff line change
@@ -8,10 +8,10 @@ redirect_from:
8
8
- "docs/events-ko-KR.html"
9
9
---
10
10
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:
12
12
13
13
* 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.
15
15
16
16
Örneğin HTML'de aşağıdaki gibi olan kod:
17
17
@@ -29,15 +29,15 @@ React'te biraz daha farklıdır:
29
29
</button>
30
30
```
31
31
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:
33
33
34
34
```html
35
35
<ahref="#"onclick="console.log('The link was clicked.'); return false">
36
36
Click me
37
37
</a>
38
38
```
39
39
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:
41
41
42
42
```js{2-5,8}
43
43
function ActionLink() {
@@ -54,11 +54,11 @@ function ActionLink() {
54
54
}
55
55
```
56
56
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.
58
58
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.
60
60
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:
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.
97
97
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.
99
99
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:
101
101
102
102
```js{2-6}
103
103
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.
106
106
handleClick = () => {
107
107
console.log('this is:', this);
108
108
}
@@ -117,9 +117,9 @@ class LoggingButton extends React.Component {
117
117
}
118
118
```
119
119
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.
121
121
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:
123
123
124
124
```js{7-9}
125
125
class LoggingButton extends React.Component {
@@ -128,7 +128,7 @@ class LoggingButton extends React.Component {
128
128
}
129
129
130
130
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.
132
132
return (
133
133
<button onClick={(e) => this.handleClick(e)}>
134
134
Click me
@@ -138,7 +138,7 @@ class LoggingButton extends React.Component {
138
138
}
139
139
```
140
140
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.
142
142
143
143
## Olay Fonksiyonlarına Parametre Gönderimi {#passing-arguments-to-event-handlers}
0 commit comments