` DOM node is removed, React will call your `ref` callback with `null`.
+React, `
` DOM düğümü ekrana eklendiğinde, `ref` callback'inizi argümanda DOM düğümü (`node`) olacak şekilde çağıracaktır. Bu `
` DOM düğümü kaldırıldığında ise React, `ref` callback'inizi `null` ile çağıracaktır.
-React will also call your `ref` callback whenever you pass a *different* `ref` callback. In the above example, `(node) => { ... }` is a different function on every render. When your component re-renders, the *previous* function will be called with `null` as the argument, and the *next* function will be called with the DOM node.
+Ayrıca React, siz *farklı* bir `ref` callback'i verir vermez `ref` callback'inizi çağıracaktır. Yukarıdaki örnekteki `(node) => { ... }`, her render'da farklı bir fonksiyondur. Bileşeniniz tekrar render edildiğinde *önceki* fonksiyon argümanında `null` ile, *sonraki* fonkisyon ise DOM düğümüyle çağırılacaktır.
-#### Parameters {/*ref-callback-parameters*/}
+#### Parametreler {/*ref-callback-parameters*/}
-* `node`: A DOM node or `null`. React will pass you the DOM node when the ref gets attached, and `null` when the ref gets detached. Unless you pass the same function reference for the `ref` callback on every render, the callback will get temporarily detached and re-attached during every re-render of the component.
+* `node`: Bir DOM düğümü veya `null`. React, ref bağlanınca size DOM düğümü, bağlantı kesilince ise `null` verecektir. Eğer ki her render'da `ref` callback'i için aynı fonksiyon referansını vermezseniz, callback'in geçici olarak bağlantısı kesilecek ve bileşenin her yeniden render'lanması sırasında tekrar bağlanacaktır.
-#### Returns {/*returns*/}
+#### Döndürülenler {/*returns*/}
-Do not return anything from the `ref` callback.
+`ref` callback'i herhangi bir şey geri döndürmez.
---
-### React event object {/*react-event-object*/}
+### React olay nesnesi {/*react-event-object*/}
-Your event handlers will receive a *React event object.* It is also sometimes known as a "synthetic event".
+Olay yöneticileriniz bir *React olay nesnesi* alacaktır. Buna bazen "sentetik olay" da denir.
```js
{
- console.log(e); // React event object
+ console.log(e); // React olay nesnesi
}} />
```
-It conforms to the same standard as the underlying DOM events, but fixes some browser inconsistencies.
+Altta yatan DOM olaylarıyla aynı standartlara uyar ama bazı tarayıcı tutarsızlıklarına çözüm sağlar.
-Some React events do not map directly to the browser's native events. For example in `onMouseLeave`, `e.nativeEvent` will point to a `mouseout` event. The specific mapping is not part of the public API and may change in the future. If you need the underlying browser event for some reason, read it from `e.nativeEvent`.
+Bazı React olayları tarayıcının yerel olaylarıyla birebir eşleşmez. Örneğin `onMouseLeave`'de `e.nativeEvent` bir `mouseout` olayına işaret edecektir. Birebir eşleşme açık API'ye dahil değildir ve gelecekte değişebilir. Eğer herhangi bir sebeple altta yatan tarayıcı olayına ihtiyacınız varsa `e.nativeEvent`'ten ulaşabilirsiniz.
-#### Properties {/*react-event-object-properties*/}
+#### Özellikler {/*react-event-object-properties*/}
-React event objects implement some of the standard [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) properties:
+React olay nesneleri bazı standart [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) özelliklerini uygular:
-* [`bubbles`](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles): A boolean. Returns whether the event bubbles through the DOM.
-* [`cancelable`](https://developer.mozilla.org/en-US/docs/Web/API/Event/cancelable): A boolean. Returns whether the event can be canceled.
-* [`currentTarget`](https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget): A DOM node. Returns the node to which the current handler is attached in the React tree.
-* [`defaultPrevented`](https://developer.mozilla.org/en-US/docs/Web/API/Event/defaultPrevented): A boolean. Returns whether `preventDefault` was called.
-* [`eventPhase`](https://developer.mozilla.org/en-US/docs/Web/API/Event/eventPhase): A number. Returns which phase the event is currently in.
-* [`isTrusted`](https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted): A boolean. Returns whether the event was initiated by user.
-* [`target`](https://developer.mozilla.org/en-US/docs/Web/API/Event/target): A DOM node. Returns the node on which the event has occurred (which could be a distant child).
-* [`timeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/Event/timeStamp): A number. Returns the time when the event occurred.
+* [`bubbles`](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles): Bir boolean. Olayın DOM boyunca kabarıp kabarmadığını döndürür.
+* [`cancelable`](https://developer.mozilla.org/en-US/docs/Web/API/Event/cancelable): Bir boolean. Olayın iptal edip edilemediğini döndürür.
+* [`currentTarget`](https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget): Bir DOM düğümü. Mevcut yöneticinin React ağacında bağlı olduğu düğümü döndürür.
+* [`defaultPrevented`](https://developer.mozilla.org/en-US/docs/Web/API/Event/defaultPrevented): Bir boolean. `preventDefault`'un çağırılıp çağırılmadığını döndürür.
+* [`eventPhase`](https://developer.mozilla.org/en-US/docs/Web/API/Event/eventPhase): Bir sayı. Olayın halihazırda bulunduğu aşamayı döndürür.
+* [`isTrusted`](https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted): Bir boolean. Olayın kullanıcı tarafından oluşturulup oluşturulmadığını döndürür.
+* [`target`](https://developer.mozilla.org/en-US/docs/Web/API/Event/target): Bir DOM düğümü. Olayın gerçekleştiği düğümü döndürür (uzak bir alt eleman olabilir).
+* [`timeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/Event/timeStamp): Bir sayı. Olayın gerçekleştiği zamanı döndürür.
-Additionally, React event objects provide these properties:
+Ek olarak, React olay nesneleri şu özellikleri de sağlar:
-* `nativeEvent`: A DOM [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). The original browser event object.
+* `nativeEvent`: Bir DOM [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event)'i. Orijinal tarayıcı olay nesnesidir.
-#### Methods {/*react-event-object-methods*/}
+#### Metotlar {/*react-event-object-methods*/}
-React event objects implement some of the standard [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) methods:
+React olay nesneleri bazı standart [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) metotlarını uygular:
-* [`preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault): Prevents the default browser action for the event.
-* [`stopPropagation()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation): Stops the event propagation through the React tree.
+* [`preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault): Olay için varsayılan tarayıcı aksiyonunu engeller.
+* [`stopPropagation()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation): Olayın React ağacı boyunca yayılmasını durdurur.
-Additionally, React event objects provide these methods:
+Ek olarak, React olay nesneleri şu metotları da sağlar:
-* `isDefaultPrevented()`: Returns a boolean value indicating whether `preventDefault` was called.
-* `isPropagationStopped()`: Returns a boolean value indicating whether `stopPropagation` was called.
-* `persist()`: Not used with React DOM. With React Native, call this to read event's properties after the event.
-* `isPersistent()`: Not used with React DOM. With React Native, returns whether `persist` has been called.
+* `isDefaultPrevented()`: `preventDefault`'un çağırılıp çağırılmadığını gösteren bir boolean döndürür.
+* `isPropagationStopped()`: `stopPropagation`'ın çağırılıp çağırılmadığını gösteren bir boolean döndürür.
+* `persist()`: React DOM'uyla kullanılmaz. React Native'de, olaydan sonra olayın özelliklerine ulaşmak için bunu çağırın.
+* `isPersistent()`: React DOM'uyla kullanılmaz. React Native'de, `persist`'in çağırılıp çağırılmadığını döndürür.
-#### Caveats {/*react-event-object-caveats*/}
+#### Uyarılar {/*react-event-object-caveats*/}
-* The values of `currentTarget`, `eventPhase`, `target`, and `type` reflect the values your React code expects. Under the hood, React attaches event handlers at the root, but this is not reflected in React event objects. For example, `e.currentTarget` may not be the same as the underlying `e.nativeEvent.currentTarget`. For polyfilled events, `e.type` (React event type) may differ from `e.nativeEvent.type` (underlying type).
+* `currentTarget`, `eventPhase`, `target`, ve `type`'ın değerleri React kodunuzun beklediği değerleri yansıtır. React aslında olay yöneticilerini kökte bağlar ama bu React'ın olay nesnelerine yansıtılmaz. Örneğin, `e.currentTarget` altta yatan `e.nativeEvent.currentTarget` ile aynı olmayabilir. Polyfill yapılmış olaylarda `e.type` (React olay tipi), `e.nativeEvent.type`'tan (altta yatan tip) farklı olabilir.
---
-### `AnimationEvent` handler function {/*animationevent-handler*/}
+### `AnimationEvent` yönetici fonksiyonu {/*animationevent-handler*/}
-An event handler type for the [CSS animation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) events.
+[CSS animasyonu](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) olayları için bir olay yöneticisi tipi.
```js
```
-#### Parameters {/*animationevent-handler-parameters*/}
+#### Parametreler {/*animationevent-handler-parameters*/}
-* `e`: A [React event object](#react-event-object) with these extra [`AnimationEvent`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent) properties:
+* `e`: Şu ekstra [`AnimationEvent`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent) özelliklerine sahip olan bir [React olay nesnesi](#react-event-object):
* [`animationName`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent/animationName)
* [`elapsedTime`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent/elapsedTime)
* [`pseudoElement`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent/pseudoElement)
---
-### `ClipboardEvent` handler function {/*clipboadevent-handler*/}
+### `ClipboardEvent` yönetici fonksiyonu {/*clipboadevent-handler*/}
-An event handler type for the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) events.
+[Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) olayları için bir olay yöneticisi tipi.
```js
```
-#### Parameters {/*clipboadevent-handler-parameters*/}
+#### Parametreler {/*clipboadevent-handler-parameters*/}
-* `e`: A [React event object](#react-event-object) with these extra [`ClipboardEvent`](https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent) properties:
+* `e`: Şu ekstra [`ClipboardEvent`](https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent) özelliklerine sahip olan bir [React olay nesnesi](#react-event-object):
* [`clipboardData`](https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData)
---
-### `CompositionEvent` handler function {/*compositionevent-handler*/}
+### `CompositionEvent` yönetici fonksiyonu {/*compositionevent-handler*/}
-An event handler type for the [input method editor (IME)](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor) events.
+[Girdi metodu düzenleyicisi (IME)](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor) olayları için bir olay yöneticisi tipi.
```js
```
-#### Parameters {/*compositionevent-handler-parameters*/}
+#### Parametreler {/*compositionevent-handler-parameters*/}
-* `e`: A [React event object](#react-event-object) with these extra [`CompositionEvent`](https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent) properties:
+* `e`: Şu ekstra [`CompositionEvent`](https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent) özelliklerine sahip olan bir [React olay nesnesi](#react-event-object):
* [`data`](https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent/data)
---
-### `DragEvent` handler function {/*dragevent-handler*/}
+### `DragEvent` yönetici fonksiyonu {/*dragevent-handler*/}
-An event handler type for the [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) events.
+[HTML Sürükle ve Bırak API'si](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) olayları için bir olay yöneticisi tipi.
```js
<>
@@ -387,7 +387,7 @@ An event handler type for the [HTML Drag and Drop API](https://developer.mozilla
onDragStart={e => console.log('onDragStart')}
onDragEnd={e => console.log('onDragEnd')}
>
- Drag source
+ Sürükleme kaynağı
{ e.preventDefault(); console.log('onDragOver'); }}
onDrop={e => console.log('onDrop')}
>
- Drop target
+ Bırakma hedefi
>
```
-#### Parameters {/*dragevent-handler-parameters*/}
+#### Parametreler {/*dragevent-handler-parameters*/}
-* `e`: A [React event object](#react-event-object) with these extra [`DragEvent`](https://developer.mozilla.org/en-US/docs/Web/API/DragEvent) properties:
+* `e`: Şu ekstra [`DragEvent`](https://developer.mozilla.org/en-US/docs/Web/API/DragEvent) özelliklerine sahip olan bir [React olay nesnesi](#react-event-object):
* [`dataTransfer`](https://developer.mozilla.org/en-US/docs/Web/API/DragEvent/dataTransfer)
- It also includes the inherited [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) properties:
+ Ayrıca kalıtılmış [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) özellikleri de buna dahildir:
* [`altKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey)
* [`button`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button)
@@ -425,16 +425,16 @@ An event handler type for the [HTML Drag and Drop API](https://developer.mozilla
* [`screenY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenY)
* [`shiftKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/shiftKey)
- It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+ Ayrıca kalıtılmış [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) özellikleri de buna dahildir:
* [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
* [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
---
-### `FocusEvent` handler function {/*focusevent-handler*/}
+### `FocusEvent` yönetici fonksiyonu {/*focusevent-handler*/}
-An event handler type for the focus events.
+Odaklanma olayları için bir olay yöneticisi tipi.
```js
```
-[See an example.](#handling-focus-events)
+[Şu örneğe göz atın.](#handling-focus-events)
-#### Parameters {/*focusevent-handler-parameters*/}
+#### Parametreler {/*focusevent-handler-parameters*/}
-* `e`: A [React event object](#react-event-object) with these extra [`FocusEvent`](https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent) properties:
+* `e`: Şu ekstra [`FocusEvent`](https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent) özelliklerine sahip olan bir [React olay nesnesi](#react-event-object):
* [`relatedTarget`](https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent/relatedTarget)
- It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+ Ayrıca kalıtılmış [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) özellikleri de buna dahildir:
* [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
* [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
---
-### `Event` handler function {/*event-handler*/}
+### `Event` yönetici fonksiyonu {/*event-handler*/}
-An event handler type for generic events.
+Genel olaylar için bir olay yöneticisi tipi.
-#### Parameters {/*event-handler-parameters*/}
+#### Parametreler {/*event-handler-parameters*/}
-* `e`: A [React event object](#react-event-object) with no additional properties.
+* `e`: Ek özellikleri olmayan bir [React olay nesnesi](#react-event-object).
---
-### `InputEvent` handler function {/*inputevent-handler*/}
+### `InputEvent` yönetici fonksiyonu {/*inputevent-handler*/}
-An event handler type for the `onBeforeInput` event.
+`onBeforeInput` olayı için bir olay yöneticisi tipi.
```js
console.log('onBeforeInput')} />
```
-#### Parameters {/*inputevent-handler-parameters*/}
+#### Parametreler {/*inputevent-handler-parameters*/}
-* `e`: A [React event object](#react-event-object) with these extra [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent) properties:
+* `e`: Şu ekstra [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent) özelliklerine sahip olan bir [React olay nesnesi](#react-event-object):
* [`data`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent/data)
---
-### `KeyboardEvent` handler function {/*keyboardevent-handler*/}
+### `KeyboardEvent` yönetici fonksiyonu {/*keyboardevent-handler*/}
-An event handler type for keyboard events.
+Klavye olayları için bir olay yöneticisi tipi.
```js
```
-[See an example.](#handling-keyboard-events)
+[Şu örneğe göz atın.](#handling-keyboard-events)
-#### Parameters {/*keyboardevent-handler-parameters*/}
+#### Parametreler {/*keyboardevent-handler-parameters*/}
-* `e`: A [React event object](#react-event-object) with these extra [`KeyboardEvent`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) properties:
+* `e`: Şu ekstra [`KeyboardEvent`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) özelliklerine sahip olan bir [React olay nesnesi](#react-event-object):
* [`altKey`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/altKey)
* [`charCode`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/charCode)
* [`code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code)
@@ -512,16 +512,16 @@ An event handler type for keyboard events.
* [`shiftKey`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/shiftKey)
* [`which`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which)
- It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+ Ayrıca kalıtılmış [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) özellikleri de buna dahildir:
* [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
* [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
---
-### `MouseEvent` handler function {/*mouseevent-handler*/}
+### `MouseEvent` yönetici fonksiyonu {/*mouseevent-handler*/}
-An event handler type for mouse events.
+Fare olayları için bir olay yöneticisi tipi.
```js
```
-[See an example.](#handling-mouse-events)
+[Şu örneğe göz atın.](#handling-mouse-events)
-#### Parameters {/*mouseevent-handler-parameters*/}
+#### Parametreler {/*mouseevent-handler-parameters*/}
-* `e`: A [React event object](#react-event-object) with these extra [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) properties:
+* `e`: Şu ekstra [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) özelliklerine sahip olan bir [React olay nesnesi](#react-event-object):
* [`altKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey)
* [`button`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button)
* [`buttons`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons)
@@ -556,16 +556,16 @@ An event handler type for mouse events.
* [`screenY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenY)
* [`shiftKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/shiftKey)
- It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+ Ayrıca kalıtılmış [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) özellikleri de buna dahildir:
* [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
* [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
---
-### `PointerEvent` handler function {/*pointerevent-handler*/}
+### `PointerEvent` yönetici fonksiyonu {/*pointerevent-handler*/}
-An event handler type for [pointer events.](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)
+[İmleç olayları](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) için bir olay yöneticisi tipi.
```js
```
-[See an example.](#handling-pointer-events)
+[Şu örneğe göz atın.](#handling-pointer-events)
-#### Parameters {/*pointerevent-handler-parameters*/}
+#### Parametreler {/*pointerevent-handler-parameters*/}
-* `e`: A [React event object](#react-event-object) with these extra [`PointerEvent`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) properties:
+* `e`: Şu ekstra [`PointerEvent`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) özelliklerine sahip olan bir [React olay nesnesi](#react-event-object):
* [`height`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height)
* [`isPrimary`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary)
* [`pointerId`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId)
@@ -593,7 +593,7 @@ An event handler type for [pointer events.](https://developer.mozilla.org/en-US/
* [`twist`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/twist)
* [`width`](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width)
- It also includes the inherited [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) properties:
+ Ayrıca kalıtılmış [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) özellikleri de buna dahildir:
* [`altKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey)
* [`button`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button)
@@ -612,16 +612,16 @@ An event handler type for [pointer events.](https://developer.mozilla.org/en-US/
* [`screenY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenY)
* [`shiftKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/shiftKey)
- It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+ Ayrıca kalıtılmış [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) özellikleri de buna dahildir:
* [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
* [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
---
-### `TouchEvent` handler function {/*touchevent-handler*/}
+### `TouchEvent` yönetici fonksiyonu {/*touchevent-handler*/}
-An event handler type for [touch events.](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events)
+[Dokunma olayları](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events) için bir olay yöneticisi tipi.
```js
```
-#### Parameters {/*touchevent-handler-parameters*/}
+#### Parametreler {/*touchevent-handler-parameters*/}
-* `e`: A [React event object](#react-event-object) with these extra [`TouchEvent`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent) properties:
+* `e`: Şu ekstra [`TouchEvent`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent) özelliklerine sahip olan bir [React olay nesnesi](#react-event-object):
* [`altKey`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/altKey)
* [`ctrlKey`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/ctrlKey)
* [`changedTouches`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/changedTouches)
@@ -644,16 +644,16 @@ An event handler type for [touch events.](https://developer.mozilla.org/en-US/do
* [`touches`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/touches)
* [`targetTouches`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/targetTouches)
- It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+ Ayrıca kalıtılmış [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) özellikleri de buna dahildir:
* [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
* [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
---
-### `TransitionEvent` handler function {/*transitionevent-handler*/}
+### `TransitionEvent` yönetici fonksiyonu {/*transitionevent-handler*/}
-An event handler type for the CSS transition events.
+CSS geçiş olayları için bir olay yöneticisi tipi.
```js
```
-#### Parameters {/*transitionevent-handler-parameters*/}
+#### Parametreler {/*transitionevent-handler-parameters*/}
-* `e`: A [React event object](#react-event-object) with these extra [`TransitionEvent`](https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent) properties:
+* `e`: Şu ekstra [`TransitionEvent`](https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent) özelliklerine sahip olan bir [React olay nesnesi](#react-event-object):
* [`elapsedTime`](https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent/elapsedTime)
* [`propertyName`](https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent/propertyName)
* [`pseudoElement`](https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent/pseudoElement)
---
-### `UIEvent` handler function {/*uievent-handler*/}
+### `UIEvent` yönetici fonksiyonu {/*uievent-handler*/}
-An event handler type for generic UI events.
+Genel UI olayları için bir olay yöneticisi tipi.
```js
```
-#### Parameters {/*uievent-handler-parameters*/}
+#### Parametreler {/*uievent-handler-parameters*/}
-* `e`: A [React event object](#react-event-object) with these extra [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+* `e`: Şu ekstra [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) özelliklerine sahip olan bir [React olay nesnesi](#react-event-object):
* [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
* [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
---
-### `WheelEvent` handler function {/*wheelevent-handler*/}
+### `WheelEvent` yönetici fonksiyonu {/*wheelevent-handler*/}
-An event handler type for the `onWheel` event.
+`onWheel` olayı için bir olay yöneticisi tipi.
```js
```
-#### Parameters {/*wheelevent-handler-parameters*/}
+#### Parametreler {/*wheelevent-handler-parameters*/}
-* `e`: A [React event object](#react-event-object) with these extra [`WheelEvent`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent) properties:
+* `e`: Şu ekstra [`WheelEvent`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent) özelliklerine sahip olan bir [React olay nesnesi](#react-event-object):
* [`deltaMode`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaMode)
* [`deltaX`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaX)
* [`deltaY`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaY)
* [`deltaZ`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaZ)
- It also includes the inherited [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) properties:
+ Ayrıca kalıtılmış [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) özellikleri de buna dahildir:
* [`altKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey)
* [`button`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button)
@@ -726,35 +726,35 @@ An event handler type for the `onWheel` event.
* [`screenY`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenY)
* [`shiftKey`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/shiftKey)
- It also includes the inherited [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) properties:
+ Ayrıca kalıtılmış [`UIEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) özellikleri de buna dahildir:
* [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
* [`view`](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view)
---
-## Usage {/*usage*/}
+## Kullanım {/*usage*/}
-### Applying CSS styles {/*applying-css-styles*/}
+### CSS stillerinin uygulanması {/*applying-css-styles*/}
-In React, you specify a CSS class with [`className`.](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) It works like the `class` attribute in HTML:
+React'ta bir CSS sınıfını [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) kullanarak belirtirsiniz. HTML'deki `class` niteliği gibi çalışır:
```js
```
-Then you write the CSS rules for it in a separate CSS file:
+Sonra bu sınıf için CSS kurallarını ayrı bir CSS dosyasına yazarsınız:
```css
-/* In your CSS */
+/* CSS dosyanız */
.avatar {
border-radius: 50%;
}
```
-React does not prescribe how you add CSS files. In the simplest case, you'll add a [`
`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) tag to your HTML. If you use a build tool or a framework, consult its documentation to learn how to add a CSS file to your project.
+React, CSS dosyalarını nasıl ekleyeceğinizle ilgili sıkı kurallar koymaz. En basit yol, HTML'inize bir[`
`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) etiketi eklemektir. Eğer bir derleme aracı veya bir çatı kullanırsanız, projenize nasıl CSS dosyası ekleyeceğinizi öğrenmek için ilgili dokümantasyona danışabilirsiniz.
-Sometimes, the style values depend on data. Use the `style` attribute to pass some styles dynamically:
+Bazen stil değerleri veriye bağlıdır. Dinamik bir şekilde stillendirmek için `style` niteliğini kullanın:
```js {3-6}
@@ -790,7 +790,7 @@ export default function Avatar({ user }) {
return (
-#### How to apply multiple CSS classes conditionally? {/*how-to-apply-multiple-css-classes-conditionally*/}
+#### Birden fazla CSS sınıfı koşulsal olarak nasıl uygulanır? {/*how-to-apply-multiple-css-classes-conditionally*/}
-To apply CSS classes conditionally, you need to produce the `className` string yourself using JavaScript.
+CSS sınıflarını koşulsal olarak uygulamak için `className` string'ini JavaScript'i kullanarak kendiniz üretmeniz gerekiyor.
-For example, `className={'row ' + (isSelected ? 'selected': '')}` will produce either `className="row"` or `className="row selected"` depending on whether `isSelected` is `true`.
+Örneğin, `className={'row ' + (isSelected ? 'selected': '')}`, `isSelected`'ın `true` olup olmamasına göre `className="row"` veya `className="row selected"` üretecektir.
-To make this more readable, you can use a tiny helper library like [`classnames`:](https://github.com/JedWatson/classnames)
+Bunu daha okunaklı hale getirmek için [`classnames`](https://github.com/JedWatson/classnames) gibi minik yardımcı bir kütüphane kullanabilirsiniz:
```js
import cn from 'classnames';
@@ -831,7 +831,7 @@ function Row({ isSelected }) {
}
```
-It is especially convenient if you have multiple conditional classes:
+Özellikle birden fazla koşulsal sınıfınız varsa kullanışlı oluyor:
```js
import cn from 'classnames';
@@ -853,11 +853,11 @@ function Row({ isSelected, size }) {
---
-### Manipulating a DOM node with a ref {/*manipulating-a-dom-node-with-a-ref*/}
+### Bir DOM düğümünü ref ile manipüle etme {/*manipulating-a-dom-node-with-a-ref*/}
-Sometimes, you'll need to get the browser DOM node associated with a tag in JSX. For example, if you want to focus an `
` when a button is clicked, you need to call [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on the browser `
` DOM node.
+Bazı durumlarda tarayıcıdaki DOM düğümünün JSX'teki bir etiket ile ilişkilendirilmesine ihtiyaç duyacaksınız. Örneğin, eğer bir butona tıkladığınızda bir `
`'a odaklanmak istiyorsanız, tarayıcıdaki `
` DOM düğümünde [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus)'u çağırmanız gerekiyor.
-To obtain the browser DOM node for a tag, [declare a ref](/reference/react/useRef) and pass it as the `ref` attribute to that tag:
+Bir etikette, tarayıcıdaki DOM düğümünü elde etmek için, [bir ref tanımlayın](/reference/react/useRef) ve bunu, o etikete `ref` niteliği olarak verin:
```js {7}
import { useRef } from 'react';
@@ -870,7 +870,7 @@ export default function Form() {
// ...
```
-React will put the DOM node into `inputRef.current` after it's been rendered to the screen.
+React, DOM düğümü ekrana render edildikten sonra onu `inputRef.current`'ın içine koyacaktır.
@@ -888,7 +888,7 @@ export default function Form() {
<>
- Focus the input
+ Girdiye odaklan
>
);
@@ -897,24 +897,24 @@ export default function Form() {
-Read more about [manipulating DOM with refs](/learn/manipulating-the-dom-with-refs) and [check out more examples.](/reference/react/useRef#examples-dom)
+[DOM'u ref'lerle manipüle etme](/learn/manipulating-the-dom-with-refs) hakkında daha fazlasını okuyun ve [daha fazla örneğe göz atın.](/reference/react/useRef#examples-dom)
-For more advanced use cases, the `ref` attribute also accepts a [callback function.](#ref-callback)
+Daha ileri düzey kullanım durumları için `ref` niteliği ayrıca bir [callback fonksiyonu](#ref-callback) da kabul eder.
---
-### Dangerously setting the inner HTML {/*dangerously-setting-the-inner-html*/}
+### İç HTML'i tehlikeli bir şekilde ayarlama {/*dangerously-setting-the-inner-html*/}
-You can pass a raw HTML string to an element like so:
+Bir elemana şu şekilde düz bir HTML string'i verebilirsiniz:
```js
-const markup = { __html: '
some raw html
' };
+const markup = { __html: '
düz bir html içeriği
' };
return
;
```
-**This is dangerous. As with the underlying DOM [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property, you must exercise extreme caution! Unless the markup is coming from a completely trusted source, it is trivial to introduce an [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) vulnerability this way.**
+**Bu tehlikelidir. Altta yatan DOM'un [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) özelliğinde olduğu gibi, son derece dikkatli kullanmanız gerekir. Eğer ki biçimlendirme (markup) çok güvenilir bir kaynaktan gelmiyorsa, bu şekilde bir [XSS](https://tr.wikipedia.org/wiki/Siteler_aras%C4%B1_betik_%C3%A7al%C4%B1%C5%9Ft%C4%B1rma) zayıflığı oluşturmak gereksizdir.**
-For example, if you use a Markdown library that converts Markdown to HTML, you trust that its parser doesn't contain bugs, and the user only sees their own input, you can display the resulting HTML like this:
+Örneğin, eğer Markdown'ı HTML'e dönüştüren bir Markdown kütüphanesi kullanıyorsanız, ayrıştırıcısında herhangi bir hata olmadığına güveniyorsanız ve kullanıcı yalnızca kendi girdisini görüyorsa, sonuçta oluşan HTML'i şöyle görüntüleyebilirsiniz:
@@ -923,11 +923,11 @@ import { useState } from 'react';
import MarkdownPreview from './MarkdownPreview.js';
export default function MarkdownEditor() {
- const [postContent, setPostContent] = useState('_Hello,_ **Markdown**!');
+ const [postContent, setPostContent] = useState('_Merhaba,_ **Markdown**!');
return (
<>
- Enter some markdown:
+ Herhangi bir markdown girin:
-The `{__html}` object should be created as close to where the HTML is generated as possible, like the above example does in the `renderMarkdownToHTML` function. This ensures that all raw HTML being used in your code is explicitly marked as such, and that only variables that you expect to contain HTML are passed to `dangerouslySetInnerHTML`. It is not recommended to create the object inline like `
`.
+`{__html}` nesnesi, yukarıdaki örnekte `renderMarkdownToHTML` olduğu gibi, HTML'nin oluşturulduğu yere mümkün olduğunca yakın oluşturulmalıdır. Bu, kodunuzda kullanılan tüm ham HTML'nin açıkça bu şekilde işaretlenmesini ve yalnızca HTML içermesini beklediğiniz değişkenlerin `dangerouslySetInnerHTML`'ye iletilmesini sağlar. Nesnenin satır içi olarak `
` gibi oluşturulması önerilmez.
-To see why rendering arbitrary HTML is dangerous, replace the code above with this:
+Gelişigüzel HTML'i render etmenin neden tehlikeli olduğunu görmek için yukarıdaki kod yerine şunu koyun:
```js {1-4,7,8}
const post = {
- // Imagine this content is stored in the database.
- content: `
`
+ // Bu içeriğin veritabanında saklandığını hayal edelim.
+ content: `
`
};
export default function MarkdownPreview() {
- // 🔴 SECURITY HOLE: passing untrusted input to dangerouslySetInnerHTML
+ // 🔴 GÜVENLİK AÇIĞI: dangerouslySetInnerHTML'e güvenilir olmayan girdi veriyorsunuz
const markup = { __html: post.content };
return
;
}
```
-The code embedded in the HTML will run. A hacker could use this security hole to steal user information or to perform actions on their behalf. **Only use `dangerouslySetInnerHTML` with trusted and sanitized data.**
+HTML'de gömülü olan kod çalışacak. Bir hacker, bu güvenlik açığını kullanıcı bilgilerini çalmak veya kendi çıkarları için kullanabilir. **`dangerouslySetInnerHTML`'i yalnızca güvenilir ve temizlenmiş verilerle kullanın.**
---
-### Handling mouse events {/*handling-mouse-events*/}
+### Fare olaylarını yönetme {/*handling-mouse-events*/}
-This example shows some common [mouse events](#mouseevent-handler) and when they fire.
+Bu örnek bazı yaygın [fare olaylarını](#mouseevent-handler) ve ne zaman çalıştıklarını gösteriyor.
@@ -1013,28 +1014,28 @@ This example shows some common [mouse events](#mouseevent-handler) and when they
export default function MouseExample() {
return (
console.log('onMouseEnter (parent)')}
- onMouseLeave={e => console.log('onMouseLeave (parent)')}
+ onMouseEnter={e => console.log('onMouseEnter (üst eleman)')}
+ onMouseLeave={e => console.log('onMouseLeave (üst eleman)')}
>
console.log('onClick (first button)')}
- onMouseDown={e => console.log('onMouseDown (first button)')}
- onMouseEnter={e => console.log('onMouseEnter (first button)')}
- onMouseLeave={e => console.log('onMouseLeave (first button)')}
- onMouseOver={e => console.log('onMouseOver (first button)')}
- onMouseUp={e => console.log('onMouseUp (first button)')}
+ onClick={e => console.log('onClick (birinci buton)')}
+ onMouseDown={e => console.log('onMouseDown (birinci buton)')}
+ onMouseEnter={e => console.log('onMouseEnter (birinci buton)')}
+ onMouseLeave={e => console.log('onMouseLeave (birinci buton)')}
+ onMouseOver={e => console.log('onMouseOver (birinci buton)')}
+ onMouseUp={e => console.log('onMouseUp (birinci buton)')}
>
- First button
+ Birinci buton
console.log('onClick (second button)')}
- onMouseDown={e => console.log('onMouseDown (second button)')}
- onMouseEnter={e => console.log('onMouseEnter (second button)')}
- onMouseLeave={e => console.log('onMouseLeave (second button)')}
- onMouseOver={e => console.log('onMouseOver (second button)')}
- onMouseUp={e => console.log('onMouseUp (second button)')}
+ onClick={e => console.log('onClick (ikinci buton)')}
+ onMouseDown={e => console.log('onMouseDown (ikinci buton)')}
+ onMouseEnter={e => console.log('onMouseEnter (ikinci buton)')}
+ onMouseLeave={e => console.log('onMouseLeave (ikinci buton)')}
+ onMouseOver={e => console.log('onMouseOver (ikinci buton)')}
+ onMouseUp={e => console.log('onMouseUp (ikinci buton)')}
>
- Second button
+ İkinci buton
);
@@ -1050,9 +1051,9 @@ input { margin-left: 10px; }
---
-### Handling pointer events {/*handling-pointer-events*/}
+### İmleç olaylarını yönetme {/*handling-pointer-events*/}
-This example shows some common [pointer events](#pointerevent-handler) and when they fire.
+Bu örnek bazı yaygın [imleç olayarını](#pointerevent-handler) ve ne zaman çalıştıklarını gösteriyor.
@@ -1060,29 +1061,29 @@ This example shows some common [pointer events](#pointerevent-handler) and when
export default function PointerExample() {
return (
console.log('onPointerEnter (parent)')}
- onPointerLeave={e => console.log('onPointerLeave (parent)')}
+ onPointerEnter={e => console.log('onPointerEnter (üst eleman)')}
+ onPointerLeave={e => console.log('onPointerLeave (üst eleman)')}
style={{ padding: 20, backgroundColor: '#ddd' }}
>
console.log('onPointerDown (first child)')}
- onPointerEnter={e => console.log('onPointerEnter (first child)')}
- onPointerLeave={e => console.log('onPointerLeave (first child)')}
- onPointerMove={e => console.log('onPointerMove (first child)')}
- onPointerUp={e => console.log('onPointerUp (first child)')}
+ onPointerDown={e => console.log('onPointerDown (birinci alt eleman)')}
+ onPointerEnter={e => console.log('onPointerEnter (birinci alt eleman)')}
+ onPointerLeave={e => console.log('onPointerLeave (birinci alt eleman)')}
+ onPointerMove={e => console.log('onPointerMove (birinci alt eleman)')}
+ onPointerUp={e => console.log('onPointerUp (birinci alt eleman)')}
style={{ padding: 20, backgroundColor: 'lightyellow' }}
>
- First child
+ Birinci alt eleman
console.log('onPointerDown (second child)')}
- onPointerEnter={e => console.log('onPointerEnter (second child)')}
- onPointerLeave={e => console.log('onPointerLeave (second child)')}
- onPointerMove={e => console.log('onPointerMove (second child)')}
- onPointerUp={e => console.log('onPointerUp (second child)')}
+ onPointerDown={e => console.log('onPointerDown (ikinci alt eleman)')}
+ onPointerEnter={e => console.log('onPointerEnter (ikinci alt eleman)')}
+ onPointerLeave={e => console.log('onPointerLeave (ikinci alt eleman)')}
+ onPointerMove={e => console.log('onPointerMove (ikinci alt eleman)')}
+ onPointerUp={e => console.log('onPointerUp (ikinci alt eleman)')}
style={{ padding: 20, backgroundColor: 'lightblue' }}
>
- Second child
+ İkinci alt eleman
);
@@ -1098,9 +1099,9 @@ input { margin-left: 10px; }
---
-### Handling focus events {/*handling-focus-events*/}
+### Odaklanma olaylarını yönetme {/*handling-focus-events*/}
-In React, [focus events](#focusevent-handler) bubble. You can use the `currentTarget` and `relatedTarget` to differentiate if the focusing or blurring events originated from outside of the parent element. The example shows how to detect focusing a child, focusing the parent element, and how to detect focus entering or leaving the whole subtree.
+[Odaklanma olayları](#focusevent-handler) React'ta kabarırlar. Odaklanma ve bulandırma olaylarının üst elemanın dışında oluşup oluşmadığını ayırt etmek için `currentTarget` ve `relatedTarget`'i kullanabilirsiniz. Aşağıdaki örnek, bir alt elemana veya üst elemana odaklanmanın ve tüm alt ağaca giren veya çıkan odaklanmaların nasıl tespit edileceğini gösteriyor.
@@ -1111,34 +1112,34 @@ export default function FocusExample() {
tabIndex={1}
onFocus={(e) => {
if (e.currentTarget === e.target) {
- console.log('focused parent');
+ console.log('üst elemana odaklanıldı');
} else {
- console.log('focused child', e.target.name);
+ console.log(e.target.name, 'alt elemanına odaklanıldı');
}
if (!e.currentTarget.contains(e.relatedTarget)) {
- // Not triggered when swapping focus between children
- console.log('focus entered parent');
+ // Alt elemanlar arasındaki odağı değiştirirken tetiklenmez
+ console.log('odak üst elemana girdi');
}
}}
onBlur={(e) => {
if (e.currentTarget === e.target) {
- console.log('unfocused parent');
+ console.log('üst elemandan odak kaldırıldı');
} else {
- console.log('unfocused child', e.target.name);
+ console.log(e.target.name, 'alt elemanından odak kaldırıldı');
}
if (!e.currentTarget.contains(e.relatedTarget)) {
- // Not triggered when swapping focus between children
- console.log('focus left parent');
+ // Alt elemanlar arasındaki odağı değiştirirken tetiklenmez
+ console.log('odak üst elemandan çıktı');
}
}}
>
- First name:
-
+ İsim:
+
- Last name:
-
+ Soyisim:
+
);
@@ -1154,9 +1155,9 @@ input { margin-left: 10px; }
---
-### Handling keyboard events {/*handling-keyboard-events*/}
+### Klavye olaylarını yönetme {/*handling-keyboard-events*/}
-This example shows some common [keyboard events](#keyboardevent-handler) and when they fire.
+Bu örnek bazı yaygın [klavye olaylarını](#keyboardevent-handler) ve ne zaman çalıştıklarını gösteriyor.