Ortak bileşenler (örn. <div>)

• Referans
  • Ortak bileşenler (örn. <div>)
  • ref callback fonksiyonu
  • React olay nesnesi
  • AnimationEvent yönetici fonksiyonu
  • ClipboardEvent yönetici fonksiyonu
  • CompositionEvent yönetici fonksiyonu
  • DragEvent yönetici fonksiyonu
  • FocusEvent yönetici fonksiyonu
  • Event yönetici fonksiyonu
  • InputEvent yönetici fonksiyonu
  • KeyboardEvent yönetici fonksiyonu
  • MouseEvent yönetici fonksiyonu
  • PointerEvent yönetici fonksiyonu
  • TouchEvent yönetici fonksiyonu
  • TransitionEvent yönetici fonksiyonu
  • UIEvent yönetici fonksiyonu
  • WheelEvent yönetici fonksiyonu
• Kullanım
  • CSS stillerinin uygulanması
  • Bir DOM düğümünü ref ile manipüle etme
  • İç HTML’i tehlikeli bir şekilde ayarlama
  • Fare olaylarını yönetme
  • İmleç olaylarını yönetme
  • Odaklanma olaylarını yönetme
  • Klavye olaylarını yönetme

Referans

Ortak bileşenler (örn. <div>)

<div className="wrapper">Herhangi bir içerik</div>

Aşağıda daha fazla örnek bulabilirsiniz.

Prop’lar

Şu özel React prop’ları tüm yerleşik bileşenlerde desteklenir:

• children: Bir React düğümü (bir eleman, bir string, bir sayı, bir portal, null, undefined ve boolean’lar gibi boş bir düğüm, veya diğer React düğümlerinden bir dizi). Bileşenin içeriğini belirtir. JSX kullandığınızda, children prop’unu genellikle etiketleri iç içe <div><span /></div> gibi yerleştirerek üstü kapalı olarak belirteceksiniz.

• dangerouslySetInnerHTML: İçinde saf bir HTML string’i bulunan { __html: '<p>herhangi bir html</p>' } biçiminde bir nesne. DOM düğümünün innerHTML özelliğini geçersiz kılar ve içeriye verilen HTML’i gösterir. Bunu kullanırken son derece dikkatli olmalısınız! Eğer içteki HTML güvenilir değilse (mesela kullanıcı verisine dayanan bir şeyse), bir XSS riski ortaya çıkarırsınız. dangerouslySetInnerHTML kullanımıyla ilgili daha fazlasını okuyun.

• ref: useRef veya createRef’ten bir ref nesnesi, veya ref callback fonksiyonu, veya eski sürüm ref’leri için bir string. Bu düğümde ref’iniz DOM elemanıyla doldurulacaktır. DOM’u ref’lerle manipüle etmeyle ilgili daha fazlasını okuyun.

• suppressContentEditableWarning: Bir boolean. Eğer true ise, hem children hem de contentEditable={true} prop’larına sahip olan elemanlarda (ki bunlar normalde birlikte çalışmazlar) React’ın gösterdiği uyarıları baskılar. Bunu, contentEditable içeriğini manuel olarak yöneten bir metin girdisi kütüphanesi geliştiriyorsanız kullanın.

• suppressHydrationWarning: Bir boolean. Eğer sunucu taraflı render’lama kullanıyorsanız, sunucu ve istemci farklı içerikleri render ettiğinde normalde bir uyarı görürsünüz. Bazı ender durumlarda (zaman damgası gibi) ise birebir eşleşmeyi sağlamak çok zor veya imkansızdır. Eğer suppressHydrationWarning’i true olarak ayarlarsanız, React o elemanın içeriği ve niteliklerindeki yanlış eşleşmelerle ilgili bir uyarı vermeyecektir. Yalnızca bir kademe derinde çalışır ve bir kaçış yolu olarak kullanılması amaçlanmıştır. Gereğinden fazla kullanmayınız. Hydration hatalarını baskılamayla ilgili daha fazlasını okuyun.

• style: CSS biçimlerini taşıyan bir nesne, örneğin { fontWeight: 'bold', margin: 20 }. DOM’un style özelliğine benzer olarak, CSS özellik isimleri camelCase olarak yazılmalıdır, örneğin font-weight yerine fontWeight. Değerleri string veya sayı olarak verebilirsiniz. width: 100 şeklinde bir sayı verdiğinizde, eğer birimsiz özellik değilse, React bu sayıya otomatik olarak px (“piksel”)‘i ekler. style’ı yalnızca, biçim değerlerini önceden bilmediğiniz dinamik biçimler için kullanmanızı tavsiye ediyoruz. Diğer durumlarda ise className ile düz CSS sınıfları uygulamak daha verimli. className and style ile ilgili daha fazlasını okuyun.

Şu standart DOM prop’ları da tüm yerleşik bileşenlerde desteklenir:

• accessKey: Bir string. Element için bir keyboard shortcut belirtir. Genellikle önerilmez.
• aria-*: ARIA attribute’ları, bu element için accessibility tree bilgisini belirtmenizi sağlar. Tam referans için ARIA attributes sayfasına bakın. React’te tüm ARIA attribute adları HTML’dekiyle tamamen aynıdır.
• autoCapitalize: Bir string. User input’unun büyük harfe çevrilip çevrilmeyeceğini ve nasıl çevrileceğini belirtir.
• className: Bir string. Element’in CSS class name’ini belirtir. CSS style uygulama hakkında daha fazla bilgi edinin.
• contentEditable: Bir boolean. true ise browser, user’ın render edilen element’i doğrudan edit etmesine izin verir. Bu, Lexical gibi rich text input library’lerini implement etmek için kullanılır. React, contentEditable={true} olan bir element’e React children pass etmeye çalışırsanız uyarı verir; çünkü React, user edit’lerinden sonra içeriğini update edemeyecektir.
• data-*: Data attribute’ları, element’e bazı string data’lar eklemenizi sağlar; örneğin data-fruit="banana". React’te bunlar yaygın olarak kullanılmaz, çünkü genellikle data’yı bunun yerine props veya state’ten okursunuz.
• dir: 'ltr' veya 'rtl'. Element’in text direction’ını belirtir.
• draggable: Bir boolean. Element’in draggable olup olmadığını belirtir. HTML Drag and Drop API’nin bir parçasıdır.
• enterKeyHint: Bir string. Virtual keyboard’larda enter key için hangi action’ın gösterileceğini belirtir.
• htmlFor: Bir string. <label> ve <output> için, label’ı bir control ile ilişkilendirmenizi sağlar. for HTML attribute ile aynıdır. React, HTML attribute adları yerine standart DOM property adlarını (htmlFor) kullanır.
• hidden: Bir boolean veya string. Element’in hidden olup olmayacağını belirtir.
• id: Bir string. Bu element için unique identifier belirtir; daha sonra onu bulmak veya başka element’lerle connect etmek için kullanılabilir. Aynı component’in birden fazla instance’ı arasında çakışmaları önlemek için bunu useId ile generate edin.
• is: Bir string. Belirtilirse, component bir custom element gibi davranır.
• inputMode: Bir string. Hangi tür keyboard’un gösterileceğini belirtir (örneğin text, number veya telephone).
• itemProp: Bir string. Element’in structured data crawler’ları için hangi property’yi temsil ettiğini belirtir.
• lang: Bir string. Element’in language’ını belirtir.
• onAnimationEnd: Bir AnimationEvent handler function’ı. Bir CSS animation tamamlandığında fire olur.
• onAnimationEndCapture: onAnimationEnd’in capture phase’de fire olan bir versiyonu.
• onAnimationIteration: Bir AnimationEvent handler function’ı. Bir CSS animation iteration’ı bittiğinde ve bir diğeri başladığında fire olur.
• onAnimationIterationCapture: onAnimationIteration’ın capture phase’de fire olan bir versiyonu.
• onAnimationStart: Bir AnimationEvent handler function’ı. Bir CSS animation başladığında fire olur.
• onAnimationStartCapture: onAnimationStart, ancak capture phase’de fire olur.
• onAuxClick: Bir MouseEvent handler function’ı. Primary olmayan pointer button’a click edildiğinde fire olur.
• onAuxClickCapture: onAuxClick’in capture phase’de fire olan bir versiyonu.
• onBeforeInput: Bir InputEvent handler function’ı. Editable bir element’in value’su değiştirilmeden önce fire olur. React henüz native beforeinput event’ini kullanmaz; bunun yerine diğer event’leri kullanarak bunu polyfill etmeye çalışır.
• onBeforeInputCapture: onBeforeInput’un capture phase’de fire olan bir versiyonu.
• onBlur: Bir FocusEvent handler function’ı. Bir element focus’u kaybettiğinde fire olur. Built-in browser blur event’inin aksine, React’te onBlur event’i bubble eder.
• onBlurCapture: onBlur’un capture phase’de fire olan bir versiyonu.
• onClick: Bir MouseEvent handler function’ı. Pointing device üzerindeki primary button’a click edildiğinde fire olur.
• onClickCapture: onClick’in capture phase’de fire olan bir versiyonu.
• onCompositionStart: Bir CompositionEvent handler function’ı. Bir input method editor yeni bir composition session başlattığında fire olur.
• onCompositionStartCapture: onCompositionStart’ın capture phase’de fire olan bir versiyonu.
• onCompositionEnd: Bir CompositionEvent handler function’ı. Bir input method editor bir composition session’ı tamamladığında veya iptal ettiğinde fire olur.
• onCompositionEndCapture: onCompositionEnd’in capture phase’de fire olan bir versiyonu.
• onCompositionUpdate: Bir CompositionEvent handler function’ı. Bir input method editor yeni bir character aldığında fire olur.
• onCompositionUpdateCapture: onCompositionUpdate’in capture phase’de fire olan bir versiyonu.
• onContextMenu: Bir MouseEvent handler function’ı. User bir context menu açmaya çalıştığında fire olur.
• onContextMenuCapture: onContextMenu’nün capture phase’de fire olan bir versiyonu.
• onCopy: Bir ClipboardEvent handler function’ı. User clipboard’a bir şey copy etmeye çalıştığında fire olur.
• onCopyCapture: onCopy’nin capture phase’de fire olan bir versiyonu.
• onCut: Bir ClipboardEvent handler function’ı. User clipboard’a bir şey cut etmeye çalıştığında fire olur.
• onCutCapture: onCut’ın capture phase’de fire olan bir versiyonu.
• onDoubleClick: Bir MouseEvent handler function’ı. User iki kez click ettiğinde fire olur. Browser dblclick event’ine karşılık gelir.
• onDoubleClickCapture: onDoubleClick’in capture phase’de fire olan bir versiyonu.
• onDrag: Bir DragEvent handler function’ı. User bir şeyi drag ederken fire olur.
• onDragCapture: onDrag’in capture phase’de fire olan bir versiyonu.
• onDragEnd: Bir DragEvent handler function’ı. User bir şeyi drag etmeyi bıraktığında fire olur.
• onDragEndCapture: onDragEnd’in capture phase’de fire olan bir versiyonu.
• onDragEnter: Bir DragEvent handler function’ı. Drag edilen content geçerli bir drop target’a girdiğinde fire olur.
• onDragEnterCapture: onDragEnter’ın capture phase’de fire olan bir versiyonu.
• onDragOver: Bir DragEvent handler function’ı. Drag edilen content geçerli bir drop target üzerinde drag edilirken fire olur. Drop’a izin vermek için burada e.preventDefault() çağırmalısınız.
• onDragOverCapture: onDragOver’ın capture phase’de fire olan bir versiyonu.
• onDragStart: Bir DragEvent handler function’ı. User bir element’i drag etmeye başladığında fire olur.
• onDragStartCapture: onDragStart’ın capture phase’de fire olan bir versiyonu.
• onDrop: Bir DragEvent handler function’ı. Bir şey geçerli bir drop target’a drop edildiğinde fire olur.
• onDropCapture: onDrop’un capture phase’de fire olan bir versiyonu.
• onFocus: Bir FocusEvent handler function’ı. Bir element focus aldığında fire olur. Built-in browser focus event’inin aksine, React’te onFocus event’i bubble eder.
• onFocusCapture: onFocus’un capture phase’de fire olan bir versiyonu.
• onGotPointerCapture: Bir PointerEvent handler function’ı. Bir element programmatically bir pointer’ı capture ettiğinde fire olur.
• onGotPointerCaptureCapture: onGotPointerCapture’ın capture phase’de fire olan bir versiyonu.
• onKeyDown: Bir KeyboardEvent handler function’ı. Bir key basıldığında fire olur.
• onKeyDownCapture: onKeyDown’ın capture phase’de fire olan bir versiyonu.
• onKeyPress: Bir KeyboardEvent handler function’ı. Deprecated. Bunun yerine onKeyDown veya onBeforeInput kullanın.
• onKeyPressCapture: onKeyPress’in capture phase’de fire olan bir versiyonu.
• onKeyUp: Bir KeyboardEvent handler function’ı. Bir key bırakıldığında fire olur.
• onKeyUpCapture: onKeyUp’ın capture phase’de fire olan bir versiyonu.
• onLostPointerCapture: Bir PointerEvent handler function’ı. Bir element bir pointer’ı capture etmeyi bıraktığında fire olur.
• onLostPointerCaptureCapture: onLostPointerCapture’ın capture phase’de fire olan bir versiyonu.
• onMouseDown: Bir MouseEvent handler function’ı. Pointer basıldığında fire olur.
• onMouseDownCapture: onMouseDown’ın capture phase’de fire olan bir versiyonu.
• onMouseEnter: Bir MouseEvent handler function’ı. Pointer bir element’in içine hareket ettiğinde fire olur. Capture phase’i yoktur. Bunun yerine, onMouseLeave ve onMouseEnter, çıkılan element’ten girilen element’e doğru propagate eder.
• onMouseLeave: Bir MouseEvent handler function’ı. Pointer bir element’in dışına hareket ettiğinde fire olur. Capture phase’i yoktur. Bunun yerine, onMouseLeave ve onMouseEnter, çıkılan element’ten girilen element’e doğru propagate eder.
• onMouseMove: Bir MouseEvent handler function’ı. Pointer koordinat değiştirdiğinde fire olur.
• onMouseMoveCapture: onMouseMove’un capture phase’de fire olan bir versiyonu.
• onMouseOut: Bir MouseEvent handler function’ı. Pointer bir element’in dışına hareket ettiğinde veya bir child element’e girdiğinde fire olur.
• onMouseOutCapture: onMouseOut’un capture phase’de fire olan bir versiyonu.
• onMouseUp: Bir MouseEvent handler function’ı. Pointer bırakıldığında fire olur.
• onMouseUpCapture: onMouseUp’ın capture phase’de fire olan bir versiyonu.
• onPointerCancel: Bir PointerEvent handler function’ı. Browser bir pointer interaction’ı iptal ettiğinde fire olur.
• onPointerCancelCapture: onPointerCancel’ın capture phase’de fire olan bir versiyonu.
• onPointerDown: Bir PointerEvent handler function’ı. Bir pointer active olduğunda fire olur.
• onPointerDownCapture: onPointerDown’ın capture phase’de fire olan bir versiyonu.
• onPointerEnter: Bir PointerEvent handler function’ı. Bir pointer bir element’in içine hareket ettiğinde fire olur. Capture phase’i yoktur. Bunun yerine, onPointerLeave ve onPointerEnter, çıkılan element’ten girilen element’e doğru propagate eder.
• onPointerLeave: Bir PointerEvent handler function’ı. Bir pointer bir element’in dışına hareket ettiğinde fire olur. Capture phase’i yoktur. Bunun yerine, onPointerLeave ve onPointerEnter, çıkılan element’ten girilen element’e doğru propagate eder.
• onPointerMove: Bir PointerEvent handler function’ı. Bir pointer koordinat değiştirdiğinde fire olur.
• onPointerMoveCapture: onPointerMove’un capture phase’de fire olan bir versiyonu.
• onPointerOut: Bir PointerEvent handler function’ı. Bir pointer bir element’in dışına hareket ettiğinde, pointer interaction iptal edildiğinde ve birkaç başka nedenle fire olur.
• onPointerOutCapture: onPointerOut’un capture phase’de fire olan bir versiyonu.
• onPointerUp: Bir PointerEvent handler function’ı. Bir pointer artık active olmadığında fire olur.
• onPointerUpCapture: onPointerUp’ın capture phase’de fire olan bir versiyonu.
• onPaste: Bir ClipboardEvent handler function’ı. User clipboard’dan bir şey paste etmeye çalıştığında fire olur.
• onPasteCapture: onPaste’in capture phase’de fire olan bir versiyonu.
• onScroll: Bir Event handler function’ı. Bir element scrolled olduğunda fire olur. Bu event bubble etmez.
• onScrollCapture: onScroll’un capture phase’de fire olan bir versiyonu.
• onSelect: Bir Event handler function’ı. Input gibi editable bir element içindeki selection değiştikten sonra fire olur. React, onSelect event’ini contentEditable={true} element’ler için de çalışacak şekilde extend eder. Ayrıca React, bunu empty selection ve edit’lerde de fire olacak şekilde extend eder (bu selection’ı etkileyebilir).
• onSelectCapture: onSelect’in capture phase’de fire olan bir versiyonu.
• onTouchCancel: Bir TouchEvent handler function’ı. Browser bir touch interaction’ı iptal ettiğinde fire olur.
• onTouchCancelCapture: onTouchCancel’ın capture phase’de fire olan bir versiyonu.
• onTouchEnd: Bir TouchEvent handler function’ı. Bir veya daha fazla touch point kaldırıldığında fire olur.
• onTouchEndCapture: onTouchEnd’in capture phase’de fire olan bir versiyonu.
• onTouchMove: Bir TouchEvent handler function’ı. Bir veya daha fazla touch point hareket ettirildiğinde fire olur.
• onTouchMoveCapture: onTouchMove’un capture phase’de fire olan bir versiyonu.
• onTouchStart: Bir TouchEvent handler function’ı. Bir veya daha fazla touch point yerleştirildiğinde fire olur.
• onTouchStartCapture: onTouchStart’ın capture phase’de fire olan bir versiyonu.
• onTransitionEnd: Bir TransitionEvent handler function’ı. Bir CSS transition tamamlandığında fire olur.
• onTransitionEndCapture: onTransitionEnd’in capture phase’de fire olan bir versiyonu.
• onWheel: Bir WheelEvent handler function’ı. User bir wheel button’ı döndürdüğünde fire olur.
• onWheelCapture: onWheel’ın capture phase’de fire olan bir versiyonu.
• role: Bir string. Assistive technology’ler için element role’ünü açıkça belirtir.
• slot: Bir string. Shadow DOM kullanırken slot name’i belirtir. React’te eşdeğer pattern genellikle JSX’i props olarak pass ederek elde edilir; örneğin <Layout left={<Sidebar />} right={<Content />} />.
• spellCheck: Bir boolean veya null. Açıkça true veya false olarak set edilirse, spellchecking’i etkinleştirir veya devre dışı bırakır.
• tabIndex: Bir number. Default Tab button behavior’ını override eder. -1 ve 0 dışındaki value’ları kullanmaktan kaçının.
• title: Bir string. Element için tooltip text’ini belirtir.
• translate: 'yes' veya 'no'. 'no' pass etmek, element content’ini çevrilmekten hariç tutar.

Prop olarak özel nitelikler de verebilirsiniz, örneğin ozelprop="herhangiBirDeger". Bu, üçüncü parti kütüphaneleri entegre ederken işinize yarayabilir. Özel nitelik isimlerinin küçük harflerle yazılması ve on ile başlamaması gerekmektedir. Değer bir stringe dönüştürülecek. Eğer null veya undefined verirseniz bu özel nitelik kaldırılacaktır.

Şu olaylar yalnızca <form> elemanlarında çalışır:

• onReset: Bir Event yönetici fonksiyonu. Form sıfırlanınca çalışır.
• onResetCapture: onReset’in yakalama aşamasında çalışan versiyonu.
• onSubmit: Bir Event yönetici fonksiyonu. Form gönderilince çalışır.
• onSubmitCapture: onSubmit’in yakalama aşamasında çalışan versiyonu.

Şu olaylar yalnızca <dialog> elemanlarında çalışır. Tarayıcı olaylarının aksine, bunlar React’ta kabarırlar:

• onCancel: Bir Event yönetici fonksiyonu. Kullanıcı diyaloğu kapatmayı deneyince çalışır.
• onCancelCapture: onCancel’ın yakalama aşamasında çalışan versiyonu.
• onClose: Bir Event yönetici fonksiyonu. Diyalog kapatılınca çalışır.
• onCloseCapture: onClose’un yakalama aşamasında çalışan versiyonu.

Şu olaylar yalnızca <details> elemanlarında çalışır. Tarayıcı olaylarının aksine, bunlar React’ta kabarırlar:

• onToggle: Bir Event yönetici fonksiyonu. Kullanıcı detayların aç-kapa modları arasında geçiş yapınca çalışır.
• onToggleCapture: onToggle’ın yakalama aşamasında çalışan versiyonu.

Şu olaylar <img>, <iframe>, <object>, <embed>, <link>, ve SVG <image> elemanlarında çalışır. Tarayıcı olaylarının aksine, bunlar React’ta kabarırlar:

• onLoad: Bir Event yönetici fonksiyonu. Kaynak yüklenince çalışır.
• onLoadCapture: onLoad’un yakalama aşamasında çalışan versiyonu.
• onError: Bir Event yönetici fonksiyonu. Kaynak yüklenemeyince çalışır.
• onErrorCapture: onError’ın yakalama aşamasında çalışan versiyonu.

Şu olaylar <audio> ve <video> gibi kaynaklarda çalışır. Tarayıcı olaylarının aksine, bunlar React’ta kabarırlar:

• onAbort: Bir Event yönetici fonksiyonu. Kaynak bir hatayla karşılaşmamasına rağmen tam olarak yüklenmediğinde çalışır.
• onAbortCapture: onAbort’un yakalama aşamasında çalışan versiyonu.
• onCanPlay: Bir Event yönetici fonksiyonu. Oynatmaya başlamak için yeterince veri olup, arabelleğe almadan sonuna kadar oynatmaya yetecek kadar veri olmadığı zaman çalışır.
• onCanPlayCapture: onCanPlay’in yakalama aşamasında çalışan versiyonu.
• onCanPlayThrough: Bir Event yönetici fonksiyonu. Arabelleğe almadan sonuna kadar oynatmayı mümkün kılacak kadar veri olduğu zaman çalışır.
• onCanPlayThroughCapture: onCanPlayThrough’nun yakalama aşamasında çalışan versiyonu.
• onDurationChange: Bir Event yönetici fonksiyonu. Medya süresi güncellenince çalışır.
• onDurationChangeCapture: onDurationChange’in yakalama aşamasında çalışan versiyonu.
• onEmptied: Bir Event yönetici fonksiyonu. Medya boşaltılınca çalışır.
• onEmptiedCapture: onEmptied’in yakalama aşamasında çalışan versiyonu.
• onEncrypted: Bir Event yönetici fonksiyonu. Tarayıcı şifrelenmiş bir medyayla karşılaşınca çalışır.
• onEncryptedCapture: onEncrypted’ın yakalama aşamasında çalışan versiyonu.
• onEnded: Bir Event yönetici fonksiyonu. Oynatacak bir şey kalmadığı için oynatma durunca çalışır.
• onEndedCapture: onEnded’ın yakalama aşamasında çalışan versiyonu.
• onError: Bir Event yönetici fonksiyonu. Kaynak yüklenemeyince çalışır.
• onErrorCapture: onError’ın yakalama aşamasında çalışan versiyonu.
• onLoadedData: Bir Event yönetici fonksiyonu. Mevcut oynatma çerçevesi yüklenince çalışır.
• onLoadedDataCapture: onLoadedData’nın yakalama aşamasında çalışan versiyonu.
• onLoadedMetadata: Bir Event yönetici fonksiyonu. Üstveri yüklenince çalışır.
• onLoadedMetadataCapture: onLoadedMetadata’nın yakalama aşamasında çalışan versiyonu.
• onLoadStart: Bir Event yönetici fonksiyonu. Tarayıcı, kaynağı yüklemeye başlayınca çalışır.
• onLoadStartCapture: onLoadStart’ın yakalama aşamasında çalışan versiyonu.
• onPause: Bir Event yönetici fonksiyonu. Medya duraklatılınca çalışır.
• onPauseCapture: onPause’un yakalama aşamasında çalışan versiyonu.
• onPlay: Bir Event yönetici fonksiyonu. Medya duraklatmadan çıkınca çalışır.
• onPlayCapture: onPlay’in yakalama aşamasında çalışan versiyonu.
• onPlaying: Bir Event yönetici fonksiyonu. Medya çalmaya başlayınca veya baştan başlayınca çalışır.
• onPlayingCapture: onPlaying’in yakalama aşamasında çalışan versiyonu.
• onProgress: Bir Event yönetici fonksiyonu. Kaynak yüklenirken aralıklı olarak çalışır.
• onProgressCapture: onProgress’in yakalama aşamasında çalışan versiyonu.
• onRateChange: Bir Event yönetici fonksiyonu. Çalma hızı değişince çalışır.
• onRateChangeCapture: onRateChange’in yakalama aşamasında çalışan versiyonu.
• onResize: Bir Event yönetici fonksiyonu. Video boyutu değişince çalışır.
• onResizeCapture: onResize’ın yakalama aşamasında çalışan versiyonu.
• onSeeked: Bir Event yönetici fonksiyonu. Arama (seeking) işlemi tamamlanınca çalışır.
• onSeekedCapture: onSeeked’in yakalama aşamasında çalışan versiyonu.
• onSeeking: Bir Event yönetici fonksiyonu. Arama (seeking) işlemi başlayınca çalışır.
• onSeekingCapture: onSeeking’in yakalama aşamasında çalışan versiyonu.
• onStalled: Bir Event yönetici fonksiyonu. Tarayıcı veri beklerken takılı kalınca çalışır.
• onStalledCapture: onStalled’un yakalama aşamasında çalışan versiyonu.
• onSuspend: Bir Event yönetici fonksiyonu. Kaynak yükleme asılı kalınca çalışır.
• onSuspendCapture: onSuspend’in yakalama aşamasında çalışan versiyonu.
• onTimeUpdate: Bir Event yönetici fonksiyonu. Mevcut oynatma zamanı güncellenince çalışır.
• onTimeUpdateCapture: onTimeUpdate’in yakalama aşamasında çalışan versiyonu.
• onVolumeChange: Bir Event yönetici fonksiyonu. Videonun sesi değişince çalışır.
• onVolumeChangeCapture: onVolumeChange’in yakalama aşamasında çalışan versiyonu.
• onWaiting: Bir Event yönetici fonksiyonu. Oynatma geçici veri eksikliğinden dolayı durunca çalışır.
• onWaitingCapture: onWaiting’in yakalama aşamasında çalışan versiyonu.

Uyarılar

• Aynı anda hem children hem de dangerouslySetInnerHTML kullanamazsınız.
• Bazı olaylar (onAbort ve onLoad gibi) tarayıcıda kabarmaz ama React’ta kabarır.

ref callback fonksiyonu

ref niteliğine, bir ref nesnesi yerine (useRef tarafından döndürülen gibi) bir fonksiyon verebilirsiniz.

<div ref={(node) => {
  console.log('Bağlı', node);

  return () => {
    console.log('Temizlik', node)
  }
}}>

ref geri çağırma fonksiyonunun kullanım örneğine bakın.

<div> DOM düğümü ekrana eklendiğinde, React ref geri çağırma fonksiyonunuzu DOM node parametresiyle çağıracaktır. O <div> DOM düğümü kaldırıldığında, React geri çağırmadan döndürülen temizlik fonksiyonunu çağıracaktır.

React ayrıca, farklı bir ref geri çağırma fonksiyonu geçtiğinizde de ref geri çağırmanızı çağıracaktır. Yukarıdaki örnekte, (node) => { ... } her render işleminde farklı bir fonksiyondur. Bileşen yeniden render edildiğinde, önceki fonksiyon null parametresiyle çağrılacak ve sonraki fonksiyon DOM düğümüyle çağrılacaktır.

Parametreler

• node: Bir DOM düğümü. ref eklenirken, React size DOM düğümünü iletecektir. Her render işleminde ref geri çağırma fonksiyonu için aynı fonksiyon referansını geçmediğiniz sürece, geri çağırma fonksiyonu her bileşen yeniden render edildiğinde geçici olarak temizlenip yeniden oluşturulacaktır.

Döndürülenler

• isteğe bağlı temizlik fonksiyonu: ref ayrıldığında, React temizlik fonksiyonunu çağıracaktır. Eğer ref geri çağırmasından bir fonksiyon döndürülmezse, React, ref ayrıldığında geri çağırmayı tekrar null parametresiyle çağıracaktır. Bu davranış gelecekteki bir sürümde kaldırılacaktır.

Uyarılar

• Strict Mode etkinleştirildiğinde, React ilk gerçek kurululumdan önce bir ekstra sadece geliştirme amaçlı kurulum+temizlik döngüsü çalıştıracaktır. Bu, temizlik mantığınızın kurulum mantığını “yansıttığını” ve kurulumun yaptığı her şeyi durdurup geri aldığından emin olan bir stres testidir. Bu, bir problem oluşturuyorsa temizlik fonksiyonunu uygulayın.
• Farklı bir ref geri çağırma fonksiyonu geçtiğinizde, React, sağlanmışsa önceki geri çağırmanın temizlik fonksiyonunu çağıracaktır. Eğer temizlik fonksiyonu tanımlanmazsa, ref geri çağırması null parametresiyle çağrılacaktır. Sonraki fonksiyon ise DOM düğümü ile çağrılacaktır.

React olay nesnesi

Olay yöneticileriniz bir React olay nesnesi alacaktır. Buna bazen “sentetik olay” da denir.

<button onClick={e => {
  console.log(e); // React olay nesnesi
}} />

Altta yatan DOM olaylarıyla aynı standartlara uyar ama bazı tarayıcı tutarsızlıklarına çözüm sağlar.

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.

Özellikler

React olay nesneleri bazı standart Event özelliklerini uygular:

• bubbles: Bir boolean. Event’in DOM boyunca bubble edip etmediğini return eder.
• cancelable: Bir boolean. Event’in cancel edilip edilemeyeceğini return eder.
• currentTarget: Bir DOM node. React tree içinde current handler’ın attach edildiği node’u return eder.
• defaultPrevented: Bir boolean. preventDefault’un çağrılıp çağrılmadığını return eder.
• eventPhase: Bir number. Event’in şu anda hangi phase’de olduğunu return eder.
• isTrusted: Bir boolean. Event’in user tarafından başlatılıp başlatılmadığını return eder.
• target: Bir DOM node. Event’in gerçekleştiği node’u return eder (bu uzak bir child olabilir).
• timeStamp: Bir number. Event’in gerçekleştiği zamanı return eder.

Ek olarak, React olay nesneleri şu özellikleri de sağlar:

• nativeEvent: Bir DOM Event’i. Orijinal tarayıcı olay nesnesidir.

Metotlar

React olay nesneleri bazı standart Event metotlarını uygular:

• preventDefault(): Olay için varsayılan tarayıcı aksiyonunu engeller.
• stopPropagation(): Olayın React ağacı boyunca yayılmasını durdurur.

Ek olarak, React olay nesneleri şu metotları da sağlar:

• 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.

Uyarılar

• 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 yönetici fonksiyonu

CSS animasyonu olayları için bir olay yöneticisi tipi.

<div
  onAnimationStart={e => console.log('onAnimationStart')}
  onAnimationIteration={e => console.log('onAnimationIteration')}
  onAnimationEnd={e => console.log('onAnimationEnd')}
/>

Parametreler

• e: Şu ekstra AnimationEvent özelliklerine sahip olan bir React olay nesnesi:
  • animationName
  • elapsedTime
  • pseudoElement

ClipboardEvent yönetici fonksiyonu

Clipboard API olayları için bir olay yöneticisi tipi.

<input
  onCopy={e => console.log('onCopy')}
  onCut={e => console.log('onCut')}
  onPaste={e => console.log('onPaste')}
/>

Parametreler

• e: Şu ekstra ClipboardEvent özelliklerine sahip olan bir React olay nesnesi:

  • clipboardData

CompositionEvent yönetici fonksiyonu

Girdi metodu düzenleyicisi (IME) olayları için bir olay yöneticisi tipi.

<input
  onCompositionStart={e => console.log('onCompositionStart')}
  onCompositionUpdate={e => console.log('onCompositionUpdate')}
  onCompositionEnd={e => console.log('onCompositionEnd')}
/>

Parametreler

• e: Şu ekstra CompositionEvent özelliklerine sahip olan bir React olay nesnesi:
  • data

DragEvent yönetici fonksiyonu

HTML Sürükle ve Bırak API’si olayları için bir olay yöneticisi tipi.

<>
  <div
    draggable={true}
    onDragStart={e => console.log('onDragStart')}
    onDragEnd={e => console.log('onDragEnd')}
  >
    Sürükleme kaynağı
  </div>

  <div
    onDragEnter={e => console.log('onDragEnter')}
    onDragLeave={e => console.log('onDragLeave')}
    onDragOver={e => { e.preventDefault(); console.log('onDragOver'); }}
    onDrop={e => console.log('onDrop')}
  >
    Bırakma hedefi
  </div>
</>

Parametreler

• e: Şu ekstra DragEvent özelliklerine sahip olan bir React olay nesnesi:

  • dataTransfer

  Ayrıca kalıtılmış MouseEvent özellikleri de buna dahildir:

  • altKey
  • button
  • buttons
  • ctrlKey
  • clientX
  • clientY
  • getModifierState(key)
  • metaKey
  • movementX
  • movementY
  • pageX
  • pageY
  • relatedTarget
  • screenX
  • screenY
  • shiftKey

  Ayrıca kalıtılmış UIEvent özellikleri de buna dahildir:

  • detail
  • view

FocusEvent yönetici fonksiyonu

Odaklanma olayları için bir olay yöneticisi tipi.

<input
  onFocus={e => console.log('onFocus')}
  onBlur={e => console.log('onBlur')}
/>

Şu örneğe göz atın.

Parametreler

• e: Şu ekstra FocusEvent özelliklerine sahip olan bir React olay nesnesi:

  • relatedTarget

  Ayrıca kalıtılmış UIEvent özellikleri de buna dahildir:

  • detail
  • view

Event yönetici fonksiyonu

Genel olaylar için bir olay yöneticisi tipi.

Parametreler

• e: Ek özellikleri olmayan bir React olay nesnesi.

InputEvent yönetici fonksiyonu

onBeforeInput olayı için bir olay yöneticisi tipi.

<input onBeforeInput={e => console.log('onBeforeInput')} />

Parametreler

• e: Şu ekstra InputEvent özelliklerine sahip olan bir React olay nesnesi:
  • data

KeyboardEvent yönetici fonksiyonu

Klavye olayları için bir olay yöneticisi tipi.

<input
  onKeyDown={e => console.log('onKeyDown')}
  onKeyUp={e => console.log('onKeyUp')}
/>

Şu örneğe göz atın.

Parametreler

• e: Şu ekstra KeyboardEvent özelliklerine sahip olan bir React olay nesnesi:

  • altKey
  • charCode
  • code
  • ctrlKey
  • getModifierState(key)
  • key
  • keyCode
  • locale
  • metaKey
  • location
  • repeat
  • shiftKey
  • which

  Ayrıca kalıtılmış UIEvent özellikleri de buna dahildir:

  • detail
  • view

MouseEvent yönetici fonksiyonu

Fare olayları için bir olay yöneticisi tipi.

<div
  onClick={e => console.log('onClick')}
  onMouseEnter={e => console.log('onMouseEnter')}
  onMouseOver={e => console.log('onMouseOver')}
  onMouseDown={e => console.log('onMouseDown')}
  onMouseUp={e => console.log('onMouseUp')}
  onMouseLeave={e => console.log('onMouseLeave')}
/>

Şu örneğe göz atın.

Parametreler

• e: Şu ekstra MouseEvent özelliklerine sahip olan bir React olay nesnesi:

  • altKey
  • button
  • buttons
  • ctrlKey
  • clientX
  • clientY
  • getModifierState(key)
  • metaKey
  • movementX
  • movementY
  • pageX
  • pageY
  • relatedTarget
  • screenX
  • screenY
  • shiftKey

  Ayrıca kalıtılmış UIEvent özellikleri de buna dahildir:

  • detail
  • view

PointerEvent yönetici fonksiyonu

İmleç olayları için bir olay yöneticisi tipi.

<div
  onPointerEnter={e => console.log('onPointerEnter')}
  onPointerMove={e => console.log('onPointerMove')}
  onPointerDown={e => console.log('onPointerDown')}
  onPointerUp={e => console.log('onPointerUp')}
  onPointerLeave={e => console.log('onPointerLeave')}
/>

Şu örneğe göz atın.

Parametreler

• e: Şu ekstra PointerEvent özelliklerine sahip olan bir React olay nesnesi:

  • height
  • isPrimary
  • pointerId
  • pointerType
  • pressure
  • tangentialPressure
  • tiltX
  • tiltY
  • twist
  • width

  Ayrıca kalıtılmış MouseEvent özellikleri de buna dahildir:

  • altKey
  • button
  • buttons
  • ctrlKey
  • clientX
  • clientY
  • getModifierState(key)
  • metaKey
  • movementX
  • movementY
  • pageX
  • pageY
  • relatedTarget
  • screenX
  • screenY
  • shiftKey

  Ayrıca kalıtılmış UIEvent özellikleri de buna dahildir:

  • detail
  • view

TouchEvent yönetici fonksiyonu

Dokunma olayları için bir olay yöneticisi tipi.

<div
  onTouchStart={e => console.log('onTouchStart')}
  onTouchMove={e => console.log('onTouchMove')}
  onTouchEnd={e => console.log('onTouchEnd')}
  onTouchCancel={e => console.log('onTouchCancel')}
/>

Parametreler

• e: Şu ekstra TouchEvent özelliklerine sahip olan bir React olay nesnesi:

  • altKey
  • ctrlKey
  • changedTouches
  • getModifierState(key)
  • metaKey
  • shiftKey
  • touches
  • targetTouches

  Ayrıca inherited UIEvent property’lerini de içerir:

  • detail
  • view

TransitionEvent yönetici fonksiyonu

CSS geçiş olayları için bir olay yöneticisi tipi.

<div
  onTransitionEnd={e => console.log('onTransitionEnd')}
/>

Parametreler

• e: Şu ekstra TransitionEvent özelliklerine sahip olan bir React olay nesnesi:
  • elapsedTime
  • propertyName
  • pseudoElement

UIEvent yönetici fonksiyonu

Genel UI olayları için bir olay yöneticisi tipi.

<div
  onScroll={e => console.log('onScroll')}
/>

Parametreler

• e: Şu ekstra UIEvent özelliklerine sahip olan bir React olay nesnesi:
  • detail
  • view

WheelEvent yönetici fonksiyonu

onWheel olayı için bir olay yöneticisi tipi.

<div
  onWheel={e => console.log('onWheel')}
/>

Parametreler

• e: Şu ekstra WheelEvent özelliklerine sahip olan bir React olay nesnesi:

  • deltaMode
  • deltaX
  • deltaY
  • deltaZ

  Ayrıca kalıtılmış MouseEvent özellikleri de buna dahildir:

  • altKey
  • button
  • buttons
  • ctrlKey
  • clientX
  • clientY
  • getModifierState(key)
  • metaKey
  • movementX
  • movementY
  • pageX
  • pageY
  • relatedTarget
  • screenX
  • screenY
  • shiftKey

  Ayrıca kalıtılmış UIEvent özellikleri de buna dahildir:

  • detail
  • view

Kullanım

CSS stillerinin uygulanması

React’ta bir CSS sınıfını className kullanarak belirtirsiniz. HTML’deki class niteliği gibi çalışır:

<img className="avatar" />

Sonra bu sınıf için CSS kurallarını ayrı bir CSS dosyasına yazarsınız:

/* CSS dosyanız */
.avatar {
  border-radius: 50%;
}

React, CSS dosyalarını nasıl ekleyeceğinizle ilgili sıkı kurallar koymaz. En basit yol, HTML’inize bir<link> etiketi eklemektir. Eğer bir derleme aracı veya bir framework kullanırsanız, projenize nasıl CSS dosyası ekleyeceğinizi öğrenmek için ilgili dokümantasyona danışabilirsiniz.

Bazen stil değerleri veriye bağlıdır. Dinamik bir şekilde stillendirmek için style niteliğini kullanın:

<img
  className="avatar"
  style={{
    width: user.imageSize,
    height: user.imageSize
  }}
/>

Yukarıdaki örnekteki style={{}} özel bir söz dizimi değil, style={ } JSX süslü parantezleri içinde yer alan sıradan bir {} nesnesidir. Stilleriniz JavaScript değişkenlerine bağlı olduğunda yalnızca style kullanmanızı öneriyoruz.

import cn from 'classnames';

function Row({ isSelected }) {
  return (
    <div className={cn('row', isSelected && 'selected')}>
      ...
    </div>
  );
}

import cn from 'classnames';

function Row({ isSelected, size }) {
  return (
    <div className={cn('row', {
      selected: isSelected,
      large: size === 'large',
      small: size === 'small',
    })}>
      ...
    </div>
  );
}

Bir DOM düğümünü ref ile manipüle etme

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 <input>’a odaklanmak istiyorsanız, tarayıcıdaki <input> DOM düğümünde focus()’u çağırmanız gerekiyor.

Bir etikette, tarayıcıdaki DOM düğümünü elde etmek için, bir ref tanımlayın ve bunu, o etikete ref niteliği olarak verin:

import { useRef } from 'react';

export default function Form() {
  const inputRef = useRef(null);
  // ...
  return (
    <input ref={inputRef} />
    // ...

React, DOM düğümü ekrana render edildikten sonra onu inputRef.current’ın içine koyacaktır.

Refs ile DOM manipülasyonu hakkında daha fazla bilgi edinin ve daha fazla örneğe göz atın.

Daha ileri düzey kullanım durumları için ref niteliği ayrıca bir callback fonksiyonu da kabul eder.

İç HTML’i tehlikeli bir şekilde ayarlama

Bir elemana şu şekilde düz bir HTML string’i verebilirsiniz:

const markup = { __html: '<p>düz bir html içeriği</p>' };
return <div dangerouslySetInnerHTML={markup} />;

Bu tehlikelidir. Altta yatan DOM’un 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 zayıflığı oluşturmak gereksizdir.

Ö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:

{__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 <div dangerouslySetInnerHTML={{__html: markup}} /> gibi oluşturulması önerilmez.

Gelişigüzel HTML’i render etmenin neden tehlikeli olduğunu görmek için yukarıdaki kod yerine şunu koyun:

const post = {
  // Bu içeriğin veritabanında saklandığını hayal edelim.
  content: `<img src="" onerror='alert("hacklendiniz!!!")'>`
};

export default function MarkdownPreview() {
  // 🔴 GÜVENLİK AÇIĞI: dangerouslySetInnerHTML'e güvenilir olmayan girdi veriyorsunuz
  const markup = { __html: post.content };
  return <div dangerouslySetInnerHTML={markup} />;
}

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.

Fare olaylarını yönetme

Bu örnek bazı yaygın fare olaylarını ve ne zaman çalıştıklarını gösteriyor.

İmleç olaylarını yönetme

Bu örnek bazı yaygın imleç olayarını ve ne zaman çalıştıklarını gösteriyor.

Odaklanma olaylarını yönetme

Odaklanma olayları 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.

Klavye olaylarını yönetme

Bu örnek bazı yaygın klavye olaylarını ve ne zaman çalıştıklarını gösteriyor.