Komponen umum (cth. <div>)

• Referensi
  • Komponen umum (e.g. <div>)
  • Fungsi Callback ref
  • Objek event React
  • Fungsi AnimationEvent handler
  • Fungsi ClipboardEvent handler
  • Fungsi CompositionEvent handler
  • Fungsi DragEvent handler
  • Fungsi FocusEvent handler
  • Fungsi Event handler
  • Fungsi InputEvent handler
  • Fungsi KeyboardEvent handler
  • Fungsi MouseEvent handler
  • Fungsi PointerEvent handler
  • Fungsi TouchEvent handler
  • Fungsi TransitionEvent handler
  • Fungsi UIEvent handler
  • Fungsi WheelEvent handler
• Penggunaan
  • Mengaplikasikan styles CSS
  • Memanipulasi node DOM dengan sebuah ref
  • Mengatur inner HTML secara bahaya
  • Penanganan events mouse
  • Penanganan events penunjuk
  • Penanganan events fokus
  • Penanganan events papan ketik (keyboard).

Referensi

Komponen umum (e.g. <div>)

<div className="wrapper">Konten sembarang</div>

See more examples below.

Props

Beberapa props spesial React berikut didukung oleh setiap komponen bawaan:

• children: Sebuah node React (sebuah elemen, string, angka, portal, node kosong seperti null, undefined and booleans, atau senarai dari nodes React). Menggambarkan kontent yang berada di dalam komponen. Saat menggunakan JSX, biasanya kau akan mendefinisikan prop dari children secara implisit dengan menggunakan tag bersarang seperti <div><span /></div>.

• dangerouslySetInnerHTML: Sebuah objek dengan bentuk { __html: '<p>some html</p>' } yang mengandung string HTML mentah. Objek ini menimpa innerHTML yang merupakan properti dari DOM node dan menampilkan HTML yang di-passing ke dalamnya. Hal ini harus digunakan dengan sangat hati-hati! Jika HTML yang berada didalamnya tidak terpercaya (sebagai contoh, jika datanya berbasis pada data pengguna), akan beresiko pada munculnya kerentanan terhadap XSS. Baca lebih lanjut mengenai penggunaan dangerouslySetInnerHTML.

• ref: Ref adalah sebuah objek dari useRef atau createRef, atau sebuah fungsi callback ref, atau sebuah string untuk legacy refs. Ref anda akan diisi dengan elemen DOM untuk node tersebut. Baca lebih lanjut mengenai memanipulasi DOM dengan refs.

• suppressContentEditableWarning: Sebuah boolean. Jika true, menekan peringatan yang ditampilkan oleh React untuk element yang memngandung children dan contentEditable={true} (yang biasanya tidak bekerja secara bersamaan). Gunakan prop ini jika anda sedang membangun sebuah library input teks yang mengelola konten contentEditable secara manual.

• suppressHydrationWarning: Sebuah boolean. Jika anda menggunakan server rendering, biasanya terdapat peringatan saat server dan client me-render konten yang berbeda. Untuk beberapa kasus langka (seperti tag waktu), sangat sulit atau tidak mungkin untuk menjamin kecocokan yang tepat. Jika anda mengatur suppressHydrationWarning menjadi true, React tidak akan memperingati anda mengenai ketidakcocokan dalam atribut ataupun konten dari elemen tersebut. Ini hanya bekerja sedalam satu tingkat, dan dimaksudkan untuk digunakan sebagai pintu keluar darurat. Jangan terlalu sering menggunakannya. Baca mengenai menekan kesalahan hidrasi.

• style: Sebuah objek styles CSS, sebagai contoh { fontWeight: 'bold', margin: 20 }. Seperti properti dari DOM style, penamaan dari properti CSS harus ditulis dalam camelCase, sebagai contoh fontWeight bukan font-weight. Anda dapat mengoper string atau angka sebagai nilai. Jika anda memasukkan angka, seperti width: 100, React akan secara otomatis menambahkan px (“piksel”) ke dalam nilai tersebut kecuali jika properti tersebut merupakan properti tanpa unit. Kami merekomendasikan penggunaan style hanya untuk styles yang bersifat dinamis yang mana nilai dari style tersebut masih dapat berubah-ubah. Untuk kasus lainnya, penggunaan kelas CSS biasa dengan className lebih efisien. Baca lebih lanjut mengenai className dan style.

Berikut props DOM standar yang juga didukung oleh setiap komponen bawaan:

• accessKey: Sebuah string. Menentukan pintasan (shortcut) keyboard untuk elemen. Tidak direkomendasikan secara umum.
• aria-*: Atribut ARIA memungkinkan anda untuk menentukan informasi pohon aksesibilitas untuk elemen ini. Liat ARIA attributes untuk referensi yang lengkap. Dalam React, setiap atribut ARIA memiliki nama yang sama persis seperti di HTML.
• autoCapitalize: Sebuah string. menentukan apakah dan bagaimana masukkan dari pengguna harus dikapitalisasi.
• className: Sebuah string. Menentukan nama kelas CSS dari elemen tersebut. Baca lebih lanjut mengenai menerapkan styles CSS.
• contentEditable: Sebuah boolean. Jika true, peramban web (browser) akan membiarkan pengguna untuk menyunting elemen yang di-render secara langsung. Ini digunakan untuk mengimplementasi libraries masukkan teks kaya seperti Lexical. React akan memperingatkan jika anda mencoba untuk mengoper children React ke dalam elemen tersebut dengan contentEditable={true} karena React tidak akan bisa memperbarui konten tersebut setelah disunting oleh pengguna.
• data-*: Atribut data membiarkan Anda melampirkan beberapa data string ke element, sebagai contoh data-buah="pisang". Dalam React, hal ini jarang digunakan karena biasanya anda membaca data dari props ataupun state.
• dir: Antara 'ltr' atau 'rtl'. Menentukan arah teks dari elemen tersebut.
• draggable: Sebuah boolean. Menentukan apakah elemen tersebut dapat diseret. Bagian dari API HTML Drag and Drop.
• enterKeyHint: Sebuah string. Menentukan aksi apa yang direpresentasikan oleh tombol enter pada keyboard virtual.
• htmlFor: Sebuah string. Untuk <label> dan <output>, Memungkinan anda untuk mengasosiasikan label the beberapa kontrol. Sama seperti atribut HTML for. React tidak menggunakan nama dari atribut HTML melainkan menggunakan nama properti standar DOM (htmlFor)
• hidden: Sebuah boolean atau string. Menentukan apakah sebuah elemen disembunyikan atau tidak.
• id: Sebuah string. Menentukan pengidentifikasi untuk untuk elemen ini, yang mana dapat digunakan untuk menemukannya kembali atau menghubungkannya dengan elemen lain. Dapatkan dengan menggunakan useId untuk menghidari bentrokan antara beberapa instances pada komponen yang sama.
• is: Sebuah string. Jika ditentukan, maka komponen tersebut akan berperilaku seperti elemen kustom.
• inputMode: Sebuah string. Menentukan jenis keyboard apa yang akan ditampilkan (sebagai contoh, teks, angka or telepon).
• itemProp: Sebuah string. Menentukan properti apa yang merepresentasikan elemen untuk crawler data terstruktur.
• lang: Sebuah string. Menentukan bahasa dari elemen tersebut.
• onAnimationEnd: Sebuah fungsi handler AnimationEvent. Aktif saat sebuah animasi CSS selesai.
• onAnimationEndCapture: Sebuah versi dari onAnimationEnd yang aktif pada fase penangkapan.
• onAnimationIteration: Sebuah fungsi handler AnimationEvent. Aktif saat iterasi dari animasi CSS selesai, dan dimulainya animasi selanjutnya.
• onAnimationIterationCapture: Sebuah versi dari onAnimationIteration yang aktif pada fase penangkapan.
• onAnimationStart: Sebuah fungsi handler AnimationEvent. Aktif saat animasi CSS dimulai.
• onAnimationStartCapture: onAnimationStart, tetapi aktif pada fase penangkapan.
• onAuxClick: Sebuah fungsi handler MouseEvent. Aktif saat tombol penunjuk (pointer) non-primer diklik.
• onAuxClickCapture: Sebuah versi dari onAuxClick yang aktif pada fase penangkapan.
• onBeforeInput: Sebuah fungsi handler InputEvent. Aktif sebelum dilakukan modifikasi pada nilai dari elemen yang dapat disunting. React belum mengunakan event beforeinput native, dan alih-alih mencoba mengisinya menggunakan event lain.
• onBeforeInputCapture: Sebuah versi dari onBeforeInput yang aktif pada fase penangkapan.
• onBlur: Sebuah fungsi handler FocusEvent. Aktif saat sebuah elemen kehilangan fokus. Tidak seperti event blur bawaan dari peramban web (browser), di React event onBlur menggelembung (bubbles).
• onBlurCapture: Sebuah versi dari onBlur yang aktif pada fase penangkapan.
• onClick: Sebuah fungsi handler MouseEvent. Aktif ketika tombol primer pada perangkat penunjuk (pointer) diklik.
• onClickCapture: Sebuah versi dari onClick yang aktif pada fase penangkapan.
• onCompositionStart: Sebuah fungsi handler CompositionEvent. Aktif saat input method editor memulai sebuah sesi komposisi baru.
• onCompositionStartCapture: Sebuah versi dari onCompositionStart yang aktif pada fase penangkapan.
• onCompositionEnd: Sebuah fungsi handler CompositionEvent. Aktif saat input method editor menyelesaikan atau membatalkan sebuah sesi komposisi.
• onCompositionEndCapture: Sebuah versi dari onCompositionEnd yang aktif pada fase penangkapan.
• onCompositionUpdate: Sebuah fungsi handler CompositionEvent. Aktif saat input method editor menerima karakter baru.
• onCompositionUpdateCapture: Sebuah versi dari onCompositionUpdate yang aktif pada fase penangkapan.
• onContextMenu: Sebuah fungsi handler MouseEvent. Aktif saat pengguna mencoba untuk membuka menu konteks.
• onContextMenuCapture: Sebuah versi dari onContextMenu yang aktif pada fase penangkapan.
• onCopy: Sebuah fungsi handler ClipboardEvent. Aktif saat pengguna mencoba menyalin (copy) sesuatu ke clipboard.
• onCopyCapture: Sebuah versi dari onCopy yang aktif pada fase penangkapan.
• onCut: Sebuah fungsi handler ClipboardEvent. Aktif saat pengguna mencoba untuk memotong (cut) sesuatu ke clipboard.
• onCutCapture: Sebuah versi dari onCut yang aktif pada fase penangkapan.
• onDoubleClick: Sebuah fungsi handler MouseEvent. Aktif saat pengguna melakukan klik sebanyak dua kali. Sesuai dengan event dblclick pada peramban web (browser).
• onDoubleClickCapture: Sebuah versi dari onDoubleClick yang aktif pada fase penangkapan.
• onDrag: Sebuah fungsi handler DragEvent. Aktif ketika user mencoba untuk menyeret sesuatu.
• onDragCapture: Sebuah versi dari onDrag yang aktif pada fase penangkapan.
• onDragEnd: Sebuah fungsi handler DragEvent. Aktif saat user berhenti menyeret sesuatu.
• onDragEndCapture: Sebuah versi dari onDragEnd yang aktif pada fase penangkapan.
• onDragEnter: Sebuah fungsi handler DragEvent. Aktif saat konten yang terseret memasuki suatu target penurunan yang valid.
• onDragEnterCapture: Sebuah versi dari onDragEnter yang aktif pada fase penangkapan.
• onDragOver: Sebuah fungsi handler DragEvent. Aktif pada target penurunan yang valid saat konten yang terseret sedang berada pada target tersebut. Anda perlu memanggil e.preventDefault() untuk memengizinkan proses penurunan.
• onDragOverCapture: Sebuah versi dari onDragOver yang aktif pada fase penangkapan.
• onDragStart: Sebuah fungsi handler DragEvent. Aktif saat pengguna mulai menyeret sebuah element.
• onDragStartCapture: Sebuah versi dari onDragStart yang aktif pada fase penangkapan.
• onDrop: Sebuah fungsi handler DragEvent. Aktif saat terdapat sesuatu yang diturunkan pada target penurunan yang valid.
• onDropCapture: Sebuah versi dari onDrop yang aktif pada fase penangkapan.
• onFocus: Sebuah fungsi handler FocusEvent. Aktif saat sebuah elemen kehilangan fokus. Berbeda dengan event focus bawaan dari peramban web (browser), di React event onFocus menggelembung (bubbles).
• onFocusCapture: Sebuah versi dari onFocus yang aktif pada fase penangkapan.
• onGotPointerCapture: Sebuah fungsi handler PointerEvent. Aktif saat sebuah elemen secara terprogram menangkap penunjuk (pointer).
• onGotPointerCaptureCapture: Sebuah versi dari onGotPointerCapture yang aktif pada fase penangkapan.
• onKeyDown: Sebuah fungsi handler KeyboardEvent. Aktif saat sebuah tombol ditekan.
• onKeyDownCapture: Sebuah versi dari onKeyDown yang aktif pada fase penangkapan.
• onKeyPress: Sebuah fungsi handler KeyboardEvent. Deprecated. Gunakan onKeyDown atau onBeforeInput.
• onKeyPressCapture: Sebuah versi dari onKeyPress yang aktif pada fase penangkapan.
• onKeyUp: Sebuah fungsi handler KeyboardEvent. Aktif saat sebuah tombol dilepaskan.
• onKeyUpCapture: Sebuah versi dari onKeyUp yang aktif pada fase penangkapan.
• onLostPointerCapture: Sebuah fungsi handler PointerEvent. Aktif saat sebuah elemen berhenti menangkap sebuah penunjuk (pointer).
• onLostPointerCaptureCapture: Sebuah versi dari onLostPointerCapture yang aktif pada fase penangkapan.
• onMouseDown: Sebuah fungsi handler MouseEvent. Aktif saat penunjuk (pointer) ditekan.
• onMouseDownCapture: Sebuah versi dari onMouseDown yang aktif pada fase penangkapan.
• onMouseEnter: Sebuah fungsi handler MouseEvent. Aktif saat sebuah penunjuk masuk kedalam sebuah element. Tidak mempunyai fase penangkapan. Alih-alih, onMouseLeave dan onMouseEnter merambat dari satu elemen yang ditinggalkan menuju ke elemen yang dituju/dimasukkan.
• onMouseLeave: Sebuah fungsi handler MouseEvent. Aktif saat penunjuk (pointer) berada diluar elemen. Tidak mempunyai fase penangkan. Alih-alih, onMouseLeave dan onMouseEnter merambat dari satu elemen yang ditinggalkan menuju ke elemen yang dituju/dimasukkan.
• onMouseMove: Sebuah fungsi handler MouseEvent. Aktif saat penunjuk (pointer) merubah koordinat.
• onMouseMoveCapture: Sebuah versi dari onMouseMove yang aktif pada fase penangkapan.
• onMouseOut: Sebuah fungsi handler MouseEvent. Aktif saat penunjuk (pointer) bergerak keluar dari sebuah elemen, atau ketika bergerak ke suatu anak elemen.
• onMouseOutCapture: Sebuah versi dari onMouseOut yang aktif pada fase penangkapan.
• onMouseUp: Sebuah fungsi handler MouseEvent. Aktif saat penunjuk dilepaskan.
• onMouseUpCapture: Sebuah versi dari onMouseUp yang aktif pada fase penangkapan.
• onPointerCancel: Sebuah fungsi handler PointerEvent. Aktif saat peramban web (browser) membatalkan sebuah interaksi penunjuk (pointer).
• onPointerCancelCapture: Sebuah versi dari onPointerCancel yang aktif pada fase penangkapan.
• onPointerDown: Sebuah fungsi handler PointerEvent. Aktif saat sebuah penunjuk (pointer) menjadi aktif.
• onPointerDownCapture: Sebuah versi dari onPointerDown yang aktif pada fase penangkapan.
• onPointerEnter: Sebuah fungsi handler PointerEvent. Aktif saat sebuah penunjuk (pointer) bergerak memasukki sebuah elemen. Tidak mempunyai fase penangkapan. Alih-alih, onPointerLeave dan onPointerEnter merambat dari satu elemen yang ditinggalkan menuju ke elemen yang dituju/dimasukkan.
• onPointerLeave: Sebuah fungsi handler PointerEvent. Aktif saat sebuah penunjuk (pointer) bergerak keluar dari sebuah elemen. Tidak mempunyai fase penangkapan. Alih-alih, onPointerLeave and onPointerEnter merambat dari satu elemen yang ditinggalkan menuju ke elemen yang dituju/dimasukkan.
• onPointerMove: Sebuah fungsi handler PointerEvent. Aktif saat penunjuk (pointer) mengubah koordinat.
• onPointerMoveCapture: Sebuah versi dari onPointerMove yang aktif pada fase penangkapan.
• onPointerOut: Sebuah fungsi handler PointerEvent. Aktif saat penunjuk (pointer) bergerak keluar dari sebuah elemen, Saat interaksi dari penunjuk (pointer) dibatalkan, dan karena alasan lainnya.
• onPointerOutCapture: Sebuah versi dari onPointerOut yang aktif pada fase penangkapan.
• onPointerUp: Sebuah fungsi handler PointerEvent. Aktif saat penunjuk (pointer) tidak lagi aktif.
• onPointerUpCapture: Sebuah versi dari onPointerUp yang aktif pada fase penangkapan.
• onPaste: Sebuah fungsi handler ClipboardEvent. Aktif saat pengguna mencoba untuk menemplekan sesuatu dari clipboard.
• onPasteCapture: Sebuah versi dari onPaste yang aktif pada fase penangkapan.
• onScroll: Sebuah fungsi Event handler. Aktif saat sebuah elemen telah di-scroll. Event ini tidak menggelembung (bubble).
• onScrollCapture: Sebuah versi dari onScroll yang aktif pada fase penangkapan.
• onSelect: Sebuah fungsi Event handler. Aktif setelah seleksi dari sebuah elemen yang dapat disunting seperti input, mengalami perubahan. React memperluas event onSelect agar dapat bekerja juga di elemen contentEditable={true}. Sebagai tambahan, React memperluasnya agar aktif pada seleksi kosong dan juga pada saat proses menyunting (memungkian pengaruh terhadap seleksi).
• onSelectCapture: Sebuah versi dari onSelect yang aktif pada fase penangkapan.
• onTouchCancel: Sebuah fungsi handler TouchEvent. Aktif saat peramban web (browser) membatalkan sebuah interaksi sentuhan.
• onTouchCancelCapture: Sebuah versi dari onTouchCancel yang aktif pada fase penangkapan.
• onTouchEnd: Sebuah fungsi handler TouchEvent. Aktif saat satu atau lebih titik sentuhan dihapus/dilepaskan.
• onTouchEndCapture: Sebuah versi dari onTouchEnd yang aktif pada fase penangkapan.
• onTouchMove: Sebuah fungsi handler TouchEvent. Aktif saat satu atau lebih titik sentuhan bergerak.
• onTouchMoveCapture: Sebuah versi dari onTouchMove yang aktif pada fase penangkapan.
• onTouchStart: Sebuah fungsi handler TouchEvent. Aktif saat satu atau lebih titik diletakkan.
• onTouchStartCapture: Sebuah versi dari onTouchStart yang aktif pada fase penangkapan.
• onTransitionEnd: Sebuah fungsi handler TransitionEvent. Aktif saat transisi CSS selesai.
• onTransitionEndCapture: Sebuah versi dari onTransitionEnd yang aktif pada fase penangkapan.
• onWheel: Sebuah fungsi handler WheelEvent. Aktif saat pengguna memutar tombol wheel.
• onWheelCapture: Sebuah versi dari onWheel yang aktif pada fase penangkapan.
• role: Sebuah string. Menentukan peran elemen secara eksplisit untuk teknologi bantuan.
• slot: Sebuah string. Menentukan nama dari slot saat menggunakan DOM bayangan. Di React, pola yang ekuivalen biasanya didapatkan dengan mengoper JSX sebagai sebuah props, sebagai contoh <Layout kiri={<Sidebar />} kanan={<Content />} />.
• spellCheck: Sebuah boolean atau null. Jika secara eksplisit diatur sebagai true atau false, mengaktifkan atau menonaktifkan pemeriksaan ejaan.
• tabIndex: Sebuah angka. Menimpa perilaku bawaan dari tombol Tab. Hindari penggunaan nilai selain -1 dan 0.
• title: Sebuah string. Menentukan teks tooltip untuk elemen tersebut.
• translate: Antara 'yes' atau 'no'. Mengoper nilai 'no' mengecualikan konten elemen agar tidak diterjemahkan.

Anda juga dapat mengoper atribut kustom sebagai props, sebagai contoh custompropsaya="sebuahNilai". Hal ini akan sangat berguna pada proses pengintegrasian dengan libraries pihak ketiga. Nama dari atribut kustom ini harus lowercase (dalam huruf non-kapital) dan tidak diawali dengan on. Nilai tersebut akan dikonversikan kedalam String. Jika anda mengoper nilai null atau undefined, atribut kustom tersebut akan dihapus.

Berikut events yang hanya aktif untuk elemen <form>:

• onReset: Sebuah fungsi Event handler. Aktif saat sebuah form mengalami pengaturan ulang(reset).
• onResetCapture: Sebuah versi dari onReset yang aktif pada fase penangkapan.
• onSubmit: Sebuah fungsi Event handler. Aktif saat sebuah form dikirim.
• onSubmitCapture: Sebuah versi dari onSubmit yang aktif pada fase penangkapan.

Berikut events yang hanya aktif untuk elemen <dialog>. Tidak seperti events bawaan peramban web (browser), di React event-event ini menggelembung (bubble):

• onCancel: Sebuah fungsi Event handler. Aktif saat pengguna mencoba untuk mengabaikan/menutup dialog.
• onCancelCapture: Sebuah versi dari onCancel yang aktif pada fase penangkapan.
• onClose: Sebuah fungsi Event handler. Aktif saat sebuah dialog telah ditutup.
• onCloseCapture: Sebuah versi dari onClose yang aktif pada fase penangkapan.

Berikut events yang hanya aktif untuk elemen <details>. Tidak seperti events bawaan peramban web (browser), di React event-event ini menggelembung (bubble):

• onToggle: Sebuah fungsi Event handler. Aktif saat pengguna mengaktifkan detailnya.
• onToggleCapture: Sebuah versi dari onToggle yang aktif pada fase penangkapan. capture-phase-events)

Berikut events yang aktif untuk elemen <img>, <iframe>, <object>, <embed>, <link>, dan SVG <image>. Tidak seperti events bawaan peramban web (browser), di React event-event ini menggelembung (bubble):

• onLoad: Sebuah fungsi Event handler. Aktif saat sumber daya telah dimuat.
• onLoadCapture: Sebuah versi dari onLoad yang aktif pada fase penangkapan.
• onError: Sebuah fungsi Event handler. Aktif saat sumber daya tidak dapat dimuat.
• onErrorCapture: Sebuah versi dari onError yang aktif pada fase penangkapan.

Berikut events yang aktif pada beberapa sumber daya seperti <audio> dan <video>. Tidak seperti events bawaan peramban web (browser), di React event-event ini menggelembung (bubble):

• onAbort: Sebuah fungsi Event handler. Aktif saat sumber daya belum sepenuhnya dimuat, tetapi bukan karena adanya kesalahan.
• onAbortCapture: Sebuah versi dari onAbort yang aktif pada fase penangkapan.
• onCanPlay: Sebuah fungsi Event handler. Aktif saat terdapat cukup data sehingga dapat dimulai, tetapi belum cukup untuk diputar hingga akhir tanpa adanya buffering.
• onCanPlayCapture: Sebuah versi dari onCanPlay yang aktif pada fase penangkapan.
• onCanPlayThrough: Sebuah fungsi Event handler. Aktif saat terdapat cukup data yang memungkinkan untuk diputar dari awal hingga akhir tanpa adanya buffering.
• onCanPlayThroughCapture: Sebuah versi dari onCanPlayThrough yang aktif pada fase penangkapan.
• onDurationChange: Sebuah fungsi Event handler. Aktif saat durasi dari media berubah/diperbarui.
• onDurationChangeCapture: Sebuah versi dari onDurationChange yang aktif pada fase penangkapan.
• onEmptied: Sebuah fungsi Event handler. Aktif saat media telah menjadi kosong.
• onEmptiedCapture: Sebuah versi dari onEmptied yang aktif pada fase penangkapan.
• onEncrypted: Sebuah fungsi Event handler. Aktif saat peramban web (browser) menemukan media yang terenkripsi.
• onEncryptedCapture: Sebuah versi dari onEncrypted yang aktif pada fase penangkapan.
• onEnded: Sebuah fungsi Event handler. Aktif saat pemutaran berhenti karena tidak ada yang tersisa untuk diputar.
• onEndedCapture: Sebuah versi dari onEnded yang aktif pada fase penangkapan.
• onError: Sebuah fungsi Event handler. Aktif saat terdapat sumber daya yang tidak dapat dimuat.
• onErrorCapture: Sebuah versi dari onError yang aktif pada fase penangkapan.
• onLoadedData: Sebuah fungsi Event handler. Aktif saat frame pemutaran sekarang berhasil dimuat.
• onLoadedDataCapture: Sebuah versi dari onLoadedData yang aktif pada fase penangkapan.
• onLoadedMetadata: Sebuah fungsi Event handler. Aktif saat metadata berhasil dimuat.
• onLoadedMetadataCapture: Sebuah versi dari onLoadedMetadata yang aktif pada fase penangkapan.
• onLoadStart: Sebuah fungsi Event handler. Aktif saat peramban web (browser) mulai untuk memuat sumber daya.
• onLoadStartCapture: Sebuah versi dari onLoadStart yang aktif pada fase penangkapan.
• onPause: Sebuah fungsi Event handler. Aktif saat media dijeda.
• onPauseCapture: Sebuah versi dari onPause yang aktif pada fase penangkapan.
• onPlay: Sebuah fungsi Event handler. Aktif saat media sudah tidak lagi dijeda.
• onPlayCapture: Sebuah versi dari onPlay yang aktif pada fase penangkapan.
• onPlaying: Sebuah fungsi Event handler. Aktif saat media mulai atau media terulang kembali.
• onPlayingCapture: Sebuah versi dari onPlaying yang aktif pada fase penangkapan.
• onProgress: Sebuah fungsi Event handler. Aktif secara periodik ketika sumber daya sedang memuat.
• onProgressCapture: Sebuah versi dari onProgress yang aktif pada fase penangkapan.
• onRateChange: Sebuah fungsi Event handler. Aktif saat adanya perubahan pada tingkat pemutaran (playback rate).
• onRateChangeCapture: Sebuah versi dari onRateChange yang aktif pada fase penangkapan.
• onResize: Sebuah fungsi Event handler. Aktif saat ukuran dari video berubah.
• onResizeCapture: Sebuah versi dari onResize yang aktif pada fase penangkapan.
• onSeeked: Sebuah fungsi Event handler. Aktif saat operasi pencarian selesai.
• onSeekedCapture: Sebuah versi dari onSeeked yang aktif pada fase penangkapan.
• onSeeking: Sebuah fungsi Event handler. Aktif saat operasi pencari dimulai.
• onSeekingCapture: Sebuah versi dari onSeeking yang aktif pada fase penangkapan.
• onStalled: Sebuah fungsi Event handler. Aktif saat peramban web (browser) sedang menunggu data tetapi tetap tidak memuat.
• onStalledCapture: Sebuah versi dari onStalled yang aktif pada fase penangkapan.
• onSuspend: Sebuah fungsi Event handler. Aktif saat proses memuat sumber daya dihentikan.
• onSuspendCapture: Sebuah versi dari onSuspend yang aktif pada fase penangkapan.
• onTimeUpdate: Sebuah fungsi Event handler. Aktif saat adanya perubahan pada waktu dari pemutaran sekarang.
• onTimeUpdateCapture: Sebuah versi dari onTimeUpdate yang aktif pada fase penangkapan.
• onVolumeChange: Sebuah fungsi Event handler. Aktif saat adanya perubahan pada volume.
• onVolumeChangeCapture: Sebuah versi dari onVolumeChange yang aktif pada fase penangkapan.
• onWaiting: Sebuah fungsi Event handler. Aktif saat pemutaran dihentikan karena ada kekurangan data sementara.
• onWaitingCapture: Sebuah versi dari onWaiting yang aktif pada fase penangkapan.

Peringatan

• Anda tidak bisa mengoper children dan dangerouslySetInnerHTML secara bersamaan.
• Beberapa event (seperti onAbort dan onLoad) tidak menggelembung (bubble) di peramban web, tetapi menggelembung (bubble) di React.

Fungsi Callback ref

Alih-alih menggunakan sebuah objek ref (seperti yang dikembalikan oleh useRef), anda dapat mengoper sebuah fungsi ke atribut ref.

<div ref={(node) => console.log(node)} />

Lihat contoh dari penggunaan dari callback ref.

Saat node DOM <div> ditambahkan pada layar, React akan memanggil callbak dari ref beserta dengan node DOM sebagai sebuah argumen. Saat node DOM <div> tersebut dihapus, React akan memanggil callback ref dengan null

React juga akan memanggi callback ref setiap kali anda mengoper sebuah callback ref yang berbeda. Pada contoh di atas, (node) => { ... } adalah fungsi yang berbeda pada setiap render. Saat komponen anda mengalami render ulang, fungsi sebelumnya akan dipanggil dengan null sebagai argumennya, dan fungsi selanjutnya akan dipanggi dengan node DOM.

Parameter

• node: Sebuah node DOM atau null. React akan mengoper kepada anda node DOM saat ref terpasang, dan null saat ref dilepas. Kecuali, jika anda mengoper referensi fungsi yang sama untuk callback ref pada setiap render, callback tersebut akan secara sementara dilepaskan dan dipasang kembali pada setiap render ulang dari komponen tersebut.

<div ref={(node) => {
  console.log(node);

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

Objek event React

Event handlers anda akan menerima sebuah Objek Event React. Biasanya juga dikenal sebagai “synthetic event”.

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

Itu sesuai dengan stadar yang sama dengan events DOM yang mendasdarinya, tetapi memperbaiki beberapa ketidakkonsistenan dari peramban web (browser).

Beberapa events React tidak dipetakan secara langsung ke events asli dari peramban web (browser). Sebaagi contoh onMouseLeave, e.nativeEvent akan menunjuk ke sebuah event mouseout. Pemetaan spesifik bukan bagian dari API publik dan masih dapat berubah di masa mendatang. Jika anda memerlukan event peramban web (browser) mendasari karena alasan tertentu, bacalah dari e.nativeEvent.

Properti

Objek event React mengimplementasikan beberapa properti standar Event:

• bubbles: Sebuah boolean. Mengembalikan apakah gelembung (bubbles) dari event melewati DOM.
• cancelable: Sebuah boolean. Mengembalikan apakah event dapat dibatalkan.
• currentTarget: Sebuah node DOM. Mengembalikan node tempat handler saat ini terpasang di pohon React.
• defaultPrevented: Sebuah boolean. Mengembalikan apakah preventDefault dipanggil.
• eventPhase: Sebuah angka. Mengembalikan fase event saat ini.
• isTrusted: Sebuah boolean. Mengembalikan apakah event diinisiasi oleh pengguna.
• target: Sebuah node DOM. Mengembalikan node dimana event terjadi (yang bisa jadi child jauh).
• timeStamp: Sebuah angkah. Mengembalikan waktu terjadinya event.

Selain itu, Objek event React juga menyediakan properti berikut:

• nativeEvent: Sebuah DOM Event. Objek event original dari peramban web (browser).

Metode

Objek event React mengimplementasikan beberapa metode standar Event:

• preventDefault(): Mencegah aksi bawaan peramban web (browser) untuk event tersebut.
• stopPropagation(): Menghentikan propagasi event melalui pohon React.

Selain itu, objek event React juga menyediakan metode berikut:

• isDefaultPrevented(): Mengembalikan sebuah nilai boolean yang mengindikasikan apakah preventDefault dipanggil.
• isPropagationStopped(): Mengembalikan sebuah nilai boolean yang mengindikasikan apakah stopPropagation dipanggil.
• persist(): Tidak digunakan dengan DOM React. Dengan React Native, panggil ini untuk membaca properti dari event setelah event.
• isPersistent(): Tidak digunakan dengan DOM React. Dengan React Native, Mengembalikan apakah persist telah dipanggil.

Peringatan

• Nilai dari currentTarget, eventPhase, target, dan type menunjukkan nilai yang diharapkan oleh kode React anda. Di dalamnya, React memasang event handlers pada akarnya, tetapi ini tidak merefleksi di objek event React. Sebagai contoh, e.currentTarget mungkin tidak sama dengan e.nativeEvent.currentTarget. Untuk polyfilled events, e.type (Tipe event React) mungkin berbeda dengan e.nativeEvent.type ()

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 (tipe yang mendasari).

Fungsi AnimationEvent handler

Sebuah tipe event handler untuk events animasi CSS.

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

Parameter

• e: Sebuah objek event React dengan tambahan properti AnimationEvent:
  • animationName
  • elapsedTime
  • pseudoElement

Fungsi ClipboardEvent handler

Sebuah tipe event handler untuk events Clipboard API.

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

Parameter

• e: Sebuah objek event React dengan tambahan properti ClipboardEvent:

  • clipboardData

Fungsi CompositionEvent handler

Sebuah tipe event handler untuk events input method editor (IME).

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

Parameter

• e: Sebuah objek event React dengan tambahan properti CompositionEvent:
  • data

Fungsi DragEvent handler

Sebuah tipe event handler untuk events HTML Drag and Drop API.

<>
  <div
    draggable={true}
    onDragStart={e => console.log('onDragStart')}
    onDragEnd={e => console.log('onDragEnd')}
  >
    Sumber tarik
  </div>

  <div
    onDragEnter={e => console.log('onDragEnter')}
    onDragLeave={e => console.log('onDragLeave')}
    onDragOver={e => { e.preventDefault(); console.log('onDragOver'); }}
    onDrop={e => console.log('onDrop')}
  >
    Target Penurunan
  </div>
</>

Parameter

• e: Sebuah objek event React dengan tambahan properti DragEvent:

  • dataTransfer

  Ini juga termasuk properti yang diturunkan oleh MouseEvent:

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

  Ini juga termasuk properti yang diturunkan oleh UIEvent:

  • detail
  • view

Fungsi FocusEvent handler

Sebuah tipe event handler untuk events fokus.

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

Lihat Contoh.

Parameter

• e: Sebuah objek event React dengan tambahan properti FocusEvent:

  • relatedTarget

  Ini juga termasuk properti yang diturunkan oleh UIEvent:

  • detail
  • view

Fungsi Event handler

Sebuah tipe event handler untuk events umum.

Parameters

• e: Sebuah objek event React tanpa properti tambahan.

Fungsi InputEvent handler

Sebuah tipe event handler untuk event onBeforeInput.

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

Parameter

• e: Sebuah objek event React dengan tambahan properti InputEvent:
  • data

Fungsi KeyboardEvent handler

Sebuah tipe event handler untuk event papan ketik (keyboard).

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

Lihat Contoh.

Parameters

• e: Sebuah objek event React dengan tambahan properti KeyboardEvent:

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

  Ini juga termasuk properti yang diturunkan oleh UIEvent:

  • detail
  • view

Fungsi MouseEvent handler

Sebuah tipe event handler untuk event tetikus (mouse).

<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')}
/>

Lihat Contoh.

Parameter

• e: Sebuah objek event React dengan tambahan properti MouseEvent:

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

  Ini juga termasuk properti yang diturunkan oleh UIEvent:

  • detail
  • view

Fungsi PointerEvent handler

Sebuah tipe event handler untuk pointer events.

<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')}
/>

Lihat Contoh.

Parameters

• e: Sebuah objek event React dengan tambahan properti PointerEvent:

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

  Ini juga termasuk properti yang diturunkan oleh MouseEvent:

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

  Ini juga termasuk properti yang diturunkan oleh UIEvent:

  • detail
  • view

Fungsi TouchEvent handler

Sebuah tipe event handler untuk touch events.

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

Parameter

• e: Sebuah objek event React dengan tambahan properti TouchEvent:

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

  Ini juga termasuk properti yang diturunkan oleh UIEvent:

  • detail
  • view

Fungsi TransitionEvent handler

Sebuah tipe event handler untuk events transisi CSS.

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

Parameter

• e: Sebuah objek event React dengan tambahan properti TransitionEvent:
  • elapsedTime
  • propertyName
  • pseudoElement

Fungsi UIEvent handler

Sebuah tipe event handler untuk events UI umum.

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

Parameters

• e: Sebuah objek event React dengan tambahan properti UIEvent:
  • detail
  • view

Fungsi WheelEvent handler

Sebuah tipe event handler untuk event onWheel.

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

Parameter

• e: Sebuah objek event React dengan tambahan properti WheelEvent:

  • deltaMode
  • deltaX
  • deltaY
  • deltaZ

  Ini juga termasuk properti yang diturunkan oleh MouseEvent:

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

  Ini juga termasuk properti yang diturunkan oleh UIEvent:

  • detail
  • view

Penggunaan

Mengaplikasikan styles CSS

Dalam React, anda me In React, you menentukan kelas CSS dengan className. yang bekerja sama seperti atribut class di HTML:

<img className="avatar" />

Lalu, anda menulis aturan CSS untuknya pada file CSS terpisah:

/* Di file CSS anda */
.avatar {
  border-radius: 50%;
}

React tidak menentukan bagaimana cara anda menambahkan file CSS. Dalam kasus yang sederhana, anda akan menambahkan tag <link> pada HTML anda. Jika anda menggunakan sebuah alat membangun (build tool) atau framework, lihat dokumentasinya untuk mempelajari cara menambahkan file CSS ke proyek Anda.

Terkadang, nilai dari style tergantung pada data. Gunakan atribut style untuk mengoper beberapa styles secara dinamis:

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

Pada contoh di atas, style={{}} bukan merupakan sintaks khusus, tapi terdapat objek reguler {} di dalam style={ } Kurung Kurawal JSX. Kami merekomendasikan penggunaan atribut style hanya jika styles anda tergantung pada variabel Javascript.

import cn from 'classnames';

function Baris({ sedangDipilih }) {
  return (
    <div className={cn('baris', sedangDipilih && 'dipilih')}>
      ...
    </div>
  );
}

import cn from 'classnames';

function Baris({ sedangDipilih, ukuran }) {
  return (
    <div className={cn('baris', {
      dipilih: sedangDipilih,
      besar: ukuran === 'besar',
      kecil: ukuran === 'kecil',
    })}>
      ...
    </div>
  );
}

Memanipulasi node DOM dengan sebuah ref

Terkadang, anda perlu untuk mengambil node DOM peramban web (browser) yang berasosiasi dengan tag di JSX. Sebagai contoh, jika anda ingin fokus pada sebuah <input> saat sebuah tombol diklik, anda harus memanggil focus() pada node DOM <input> peramban web (browser).

Untuk mendapatkan node DOM peramban web (browser) untuk sebuah tag, deklarasikan sebuah ref dan oper sebagai atribut ref pada tag tersebut:

import { useRef } from 'react';

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

React akan meletakkan node DOM ke inputRef.current setelah ter-render pada layar.

Baca lebih lanjut mengenai memanipulasi DOM dengan refs and lihat lebih banyak contoh.

Untuk kasus yang lebih canggih, attribut ref juga menerima sebuah fungsi callback.

Mengatur inner HTML secara bahaya

Anda dapat mengoper string HTML mentah ke sebuah elemen seperti berikut:

const markup = { __html: '<p>beberapa HTML mentah</p>' };
return <div dangerouslySetInnerHTML={markup} />;

Hal ini berbahaya. Karena dengan properti DOM mendasar innerHTML, anda harus sangat berhati-hati! Kecuali, markup tersebut berasal dari sumber yang sepenuhnya dipercayai, Itu sepele untuk memperkenalkan kerentanan XSS.

Sebagai contoh, jika anda menggunakan library Markdown untuk mengkonversi Markdown ke HTML, Anda percaya bahwa parser tidak mengandung bug, dan pengguna hanya melihat masukan mereka sendiri, Anda dapat menampilkan HTML yang dihasilkan seperti ini:

Anda disarankan untuk membuat obyek {__html} sedekat mungkin ke tempat di mana HTML dibuat, seperti contoh di atas di fungsi renderMarkdownToHTML. Ini memastikan bahwa semua teks HTML mentah yang disematkan di koda Anda ditandai semestinya secara eksplisit, dan hanya variabel yang Anda perkirakan akan terisi HTML akan dioper ke dangerouslySetInnerHTML. Tidak direkomendasikan untuk membuat obyek ini di dalam baris kode seperti <div dangerouslySetInnerHTML={{__html: markup}} />.

Untuk mengetahui mengapa me-render HTML sewenang-wenang itu berbahaya, ganti kode di atas dengan ini:

const post = {
  // Bayangkan konten ini disimpan di database.
  content: `<img src="" onerror='alert("anda di hack!")'>`
};

export default function MarkdownPreview() {
  // 🔴 ISU KEAMANAN: mengoper input tidak dipercaya ke dangerouslySetInnerHTML
  const markup = { __html: post.content };
  return <div dangerouslySetInnerHTML={markup} />;
}

Kode yang disematkan dalam HTML akan berjalan. Seorang peretas dapat menggunakan lubang keamanan ini untuk mencuri informasi pengguna atau melakukan tindakan atas nama mereka. Hanya gunakan dangerouslySetInnerHTML dengan data tepercaya dan tersanitasi.

Penanganan events mouse

Contoh dibawah ini menunjukkan beberapa events mouse (tetikus) umum dan saat mereka aktif.

Penanganan events penunjuk

Contoh dibawah ini menunjukkan beberapa events penunjuk umum dan saat mereka aktif.

Penanganan events fokus

Dalam React, events fokus menggelembung (bubble). Anda dapat menggunakan currentTarget dan relatedTarget
In React, focus events bubble. You can use the currentTarget and relatedTarget untuk membedakan apakah events pemfokusan atau pemburaman berasal dari luar elemen parent. Contoh tersebut menunjukkan cara mendeteksi fokus child, memfokuskan elemen parent, dan cara mendeteksi fokus masuk atau keluar dari seluruh subpohon.

Penanganan events papan ketik (keyboard).

Contoh dibawah ini menunjukkan beberapa events papan ketik (keyboard) umum dan saat mereka aktif.