Komponen umum (cth. <div>)
Semua komponen bawaan dari sebuah peramban web (browser), seperti <div>
, mendukung beberapa props dan event umum.
- 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
- Komponen umum (e.g.
- Penggunaan
Referensi
Komponen umum (e.g. <div>
)
<div className="wrapper">Konten sembarang</div>
Props
Beberapa props spesial React berikut didukung oleh setiap komponen bawaan:
-
children
: Sebuah node React (sebuah elemen, string, angka, portal, node kosong sepertinull
,undefined
and booleans, atau senarai dari nodes React). Menggambarkan kontent yang berada di dalam komponen. Saat menggunakan JSX, biasanya kau akan mendefinisikan prop darichildren
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 menimpainnerHTML
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 penggunaandangerouslySetInnerHTML
. -
ref
: Ref adalah sebuah objek dariuseRef
ataucreateRef
, atau sebuah fungsi callbackref
, 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. Jikatrue
, menekan peringatan yang ditampilkan oleh React untuk element yang memngandungchildren
dancontentEditable={true}
(yang biasanya tidak bekerja secara bersamaan). Gunakan prop ini jika anda sedang membangun sebuah library input teks yang mengelola kontencontentEditable
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 mengatursuppressHydrationWarning
menjaditrue
, 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 DOMstyle
, penamaan dari properti CSS harus ditulis dalamcamelCase
, sebagai contohfontWeight
bukanfont-weight
. Anda dapat mengoper string atau angka sebagai nilai. Jika anda memasukkan angka, sepertiwidth: 100
, React akan secara otomatis menambahkanpx
(“piksel”) ke dalam nilai tersebut kecuali jika properti tersebut merupakan properti tanpa unit. Kami merekomendasikan penggunaanstyle
hanya untuk styles yang bersifat dinamis yang mana nilai dari style tersebut masih dapat berubah-ubah. Untuk kasus lainnya, penggunaan kelas CSS biasa denganclassName
lebih efisien. Baca lebih lanjut mengenaiclassName
danstyle
.
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. Jikatrue
, 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 dengancontentEditable={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 contohdata-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 HTMLfor
. 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 menggunakanuseId
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 handlerAnimationEvent
. Aktif saat sebuah animasi CSS selesai.onAnimationEndCapture
: Sebuah versi darionAnimationEnd
yang aktif pada fase penangkapan.onAnimationIteration
: Sebuah fungsi handlerAnimationEvent
. Aktif saat iterasi dari animasi CSS selesai, dan dimulainya animasi selanjutnya.onAnimationIterationCapture
: Sebuah versi darionAnimationIteration
yang aktif pada fase penangkapan.onAnimationStart
: Sebuah fungsi handlerAnimationEvent
. Aktif saat animasi CSS dimulai.onAnimationStartCapture
:onAnimationStart
, tetapi aktif pada fase penangkapan.onAuxClick
: Sebuah fungsi handlerMouseEvent
. Aktif saat tombol penunjuk (pointer) non-primer diklik.onAuxClickCapture
: Sebuah versi darionAuxClick
yang aktif pada fase penangkapan.onBeforeInput
: Sebuah fungsi handlerInputEvent
. Aktif sebelum dilakukan modifikasi pada nilai dari elemen yang dapat disunting. React belum mengunakan eventbeforeinput
native, dan alih-alih mencoba mengisinya menggunakan event lain.onBeforeInputCapture
: Sebuah versi darionBeforeInput
yang aktif pada fase penangkapan.onBlur
: Sebuah fungsi handlerFocusEvent
. Aktif saat sebuah elemen kehilangan fokus. Tidak seperti eventblur
bawaan dari peramban web (browser), di React eventonBlur
menggelembung (bubbles).onBlurCapture
: Sebuah versi darionBlur
yang aktif pada fase penangkapan.onClick
: Sebuah fungsi handlerMouseEvent
. Aktif ketika tombol primer pada perangkat penunjuk (pointer) diklik.onClickCapture
: Sebuah versi darionClick
yang aktif pada fase penangkapan.onCompositionStart
: Sebuah fungsi handlerCompositionEvent
. Aktif saat input method editor memulai sebuah sesi komposisi baru.onCompositionStartCapture
: Sebuah versi darionCompositionStart
yang aktif pada fase penangkapan.onCompositionEnd
: Sebuah fungsi handlerCompositionEvent
. Aktif saat input method editor menyelesaikan atau membatalkan sebuah sesi komposisi.onCompositionEndCapture
: Sebuah versi darionCompositionEnd
yang aktif pada fase penangkapan.onCompositionUpdate
: Sebuah fungsi handlerCompositionEvent
. Aktif saat input method editor menerima karakter baru.onCompositionUpdateCapture
: Sebuah versi darionCompositionUpdate
yang aktif pada fase penangkapan.onContextMenu
: Sebuah fungsi handlerMouseEvent
. Aktif saat pengguna mencoba untuk membuka menu konteks.onContextMenuCapture
: Sebuah versi darionContextMenu
yang aktif pada fase penangkapan.onCopy
: Sebuah fungsi handlerClipboardEvent
. Aktif saat pengguna mencoba menyalin (copy) sesuatu ke clipboard.onCopyCapture
: Sebuah versi darionCopy
yang aktif pada fase penangkapan.onCut
: Sebuah fungsi handlerClipboardEvent
. Aktif saat pengguna mencoba untuk memotong (cut) sesuatu ke clipboard.onCutCapture
: Sebuah versi darionCut
yang aktif pada fase penangkapan.onDoubleClick
: Sebuah fungsi handlerMouseEvent
. Aktif saat pengguna melakukan klik sebanyak dua kali. Sesuai dengan eventdblclick
pada peramban web (browser).onDoubleClickCapture
: Sebuah versi darionDoubleClick
yang aktif pada fase penangkapan.onDrag
: Sebuah fungsi handlerDragEvent
. Aktif ketika user mencoba untuk menyeret sesuatu.onDragCapture
: Sebuah versi darionDrag
yang aktif pada fase penangkapan.onDragEnd
: Sebuah fungsi handlerDragEvent
. Aktif saat user berhenti menyeret sesuatu.onDragEndCapture
: Sebuah versi darionDragEnd
yang aktif pada fase penangkapan.onDragEnter
: Sebuah fungsi handlerDragEvent
. Aktif saat konten yang terseret memasuki suatu target penurunan yang valid.onDragEnterCapture
: Sebuah versi darionDragEnter
yang aktif pada fase penangkapan.onDragOver
: Sebuah fungsi handlerDragEvent
. Aktif pada target penurunan yang valid saat konten yang terseret sedang berada pada target tersebut. Anda perlu memanggile.preventDefault()
untuk memengizinkan proses penurunan.onDragOverCapture
: Sebuah versi darionDragOver
yang aktif pada fase penangkapan.onDragStart
: Sebuah fungsi handlerDragEvent
. Aktif saat pengguna mulai menyeret sebuah element.onDragStartCapture
: Sebuah versi darionDragStart
yang aktif pada fase penangkapan.onDrop
: Sebuah fungsi handlerDragEvent
. Aktif saat terdapat sesuatu yang diturunkan pada target penurunan yang valid.onDropCapture
: Sebuah versi darionDrop
yang aktif pada fase penangkapan.onFocus
: Sebuah fungsi handlerFocusEvent
. Aktif saat sebuah elemen kehilangan fokus. Berbeda dengan eventfocus
bawaan dari peramban web (browser), di React eventonFocus
menggelembung (bubbles).onFocusCapture
: Sebuah versi darionFocus
yang aktif pada fase penangkapan.onGotPointerCapture
: Sebuah fungsi handlerPointerEvent
. Aktif saat sebuah elemen secara terprogram menangkap penunjuk (pointer).onGotPointerCaptureCapture
: Sebuah versi darionGotPointerCapture
yang aktif pada fase penangkapan.onKeyDown
: Sebuah fungsi handlerKeyboardEvent
. Aktif saat sebuah tombol ditekan.onKeyDownCapture
: Sebuah versi darionKeyDown
yang aktif pada fase penangkapan.onKeyPress
: Sebuah fungsi handlerKeyboardEvent
. Deprecated. GunakanonKeyDown
atauonBeforeInput
.onKeyPressCapture
: Sebuah versi darionKeyPress
yang aktif pada fase penangkapan.onKeyUp
: Sebuah fungsi handlerKeyboardEvent
. Aktif saat sebuah tombol dilepaskan.onKeyUpCapture
: Sebuah versi darionKeyUp
yang aktif pada fase penangkapan.onLostPointerCapture
: Sebuah fungsi handlerPointerEvent
. Aktif saat sebuah elemen berhenti menangkap sebuah penunjuk (pointer).onLostPointerCaptureCapture
: Sebuah versi darionLostPointerCapture
yang aktif pada fase penangkapan.onMouseDown
: Sebuah fungsi handlerMouseEvent
. Aktif saat penunjuk (pointer) ditekan.onMouseDownCapture
: Sebuah versi darionMouseDown
yang aktif pada fase penangkapan.onMouseEnter
: Sebuah fungsi handlerMouseEvent
. Aktif saat sebuah penunjuk masuk kedalam sebuah element. Tidak mempunyai fase penangkapan. Alih-alih,onMouseLeave
danonMouseEnter
merambat dari satu elemen yang ditinggalkan menuju ke elemen yang dituju/dimasukkan.onMouseLeave
: Sebuah fungsi handlerMouseEvent
. Aktif saat penunjuk (pointer) berada diluar elemen. Tidak mempunyai fase penangkan. Alih-alih,onMouseLeave
danonMouseEnter
merambat dari satu elemen yang ditinggalkan menuju ke elemen yang dituju/dimasukkan.onMouseMove
: Sebuah fungsi handlerMouseEvent
. Aktif saat penunjuk (pointer) merubah koordinat.onMouseMoveCapture
: Sebuah versi darionMouseMove
yang aktif pada fase penangkapan.onMouseOut
: Sebuah fungsi handlerMouseEvent
. Aktif saat penunjuk (pointer) bergerak keluar dari sebuah elemen, atau ketika bergerak ke suatu anak elemen.onMouseOutCapture
: Sebuah versi darionMouseOut
yang aktif pada fase penangkapan.onMouseUp
: Sebuah fungsi handlerMouseEvent
. Aktif saat penunjuk dilepaskan.onMouseUpCapture
: Sebuah versi darionMouseUp
yang aktif pada fase penangkapan.onPointerCancel
: Sebuah fungsi handlerPointerEvent
. Aktif saat peramban web (browser) membatalkan sebuah interaksi penunjuk (pointer).onPointerCancelCapture
: Sebuah versi darionPointerCancel
yang aktif pada fase penangkapan.onPointerDown
: Sebuah fungsi handlerPointerEvent
. Aktif saat sebuah penunjuk (pointer) menjadi aktif.onPointerDownCapture
: Sebuah versi darionPointerDown
yang aktif pada fase penangkapan.onPointerEnter
: Sebuah fungsi handlerPointerEvent
. Aktif saat sebuah penunjuk (pointer) bergerak memasukki sebuah elemen. Tidak mempunyai fase penangkapan. Alih-alih,onPointerLeave
danonPointerEnter
merambat dari satu elemen yang ditinggalkan menuju ke elemen yang dituju/dimasukkan.onPointerLeave
: Sebuah fungsi handlerPointerEvent
. Aktif saat sebuah penunjuk (pointer) bergerak keluar dari sebuah elemen. Tidak mempunyai fase penangkapan. Alih-alih,onPointerLeave
andonPointerEnter
merambat dari satu elemen yang ditinggalkan menuju ke elemen yang dituju/dimasukkan.onPointerMove
: Sebuah fungsi handlerPointerEvent
. Aktif saat penunjuk (pointer) mengubah koordinat.onPointerMoveCapture
: Sebuah versi darionPointerMove
yang aktif pada fase penangkapan.onPointerOut
: Sebuah fungsi handlerPointerEvent
. Aktif saat penunjuk (pointer) bergerak keluar dari sebuah elemen, Saat interaksi dari penunjuk (pointer) dibatalkan, dan karena alasan lainnya.onPointerOutCapture
: Sebuah versi darionPointerOut
yang aktif pada fase penangkapan.onPointerUp
: Sebuah fungsi handlerPointerEvent
. Aktif saat penunjuk (pointer) tidak lagi aktif.onPointerUpCapture
: Sebuah versi darionPointerUp
yang aktif pada fase penangkapan.onPaste
: Sebuah fungsi handlerClipboardEvent
. Aktif saat pengguna mencoba untuk menemplekan sesuatu dari clipboard.onPasteCapture
: Sebuah versi darionPaste
yang aktif pada fase penangkapan.onScroll
: Sebuah fungsiEvent
handler. Aktif saat sebuah elemen telah di-scroll. Event ini tidak menggelembung (bubble).onScrollCapture
: Sebuah versi darionScroll
yang aktif pada fase penangkapan.onSelect
: Sebuah fungsiEvent
handler. Aktif setelah seleksi dari sebuah elemen yang dapat disunting seperti input, mengalami perubahan. React memperluas eventonSelect
agar dapat bekerja juga di elemencontentEditable={true}
. Sebagai tambahan, React memperluasnya agar aktif pada seleksi kosong dan juga pada saat proses menyunting (memungkian pengaruh terhadap seleksi).onSelectCapture
: Sebuah versi darionSelect
yang aktif pada fase penangkapan.onTouchCancel
: Sebuah fungsi handlerTouchEvent
. Aktif saat peramban web (browser) membatalkan sebuah interaksi sentuhan.onTouchCancelCapture
: Sebuah versi darionTouchCancel
yang aktif pada fase penangkapan.onTouchEnd
: Sebuah fungsi handlerTouchEvent
. Aktif saat satu atau lebih titik sentuhan dihapus/dilepaskan.onTouchEndCapture
: Sebuah versi darionTouchEnd
yang aktif pada fase penangkapan.onTouchMove
: Sebuah fungsi handlerTouchEvent
. Aktif saat satu atau lebih titik sentuhan bergerak.onTouchMoveCapture
: Sebuah versi darionTouchMove
yang aktif pada fase penangkapan.onTouchStart
: Sebuah fungsi handlerTouchEvent
. Aktif saat satu atau lebih titik diletakkan.onTouchStartCapture
: Sebuah versi darionTouchStart
yang aktif pada fase penangkapan.onTransitionEnd
: Sebuah fungsi handlerTransitionEvent
. Aktif saat transisi CSS selesai.onTransitionEndCapture
: Sebuah versi darionTransitionEnd
yang aktif pada fase penangkapan.onWheel
: Sebuah fungsi handlerWheelEvent
. Aktif saat pengguna memutar tombol wheel.onWheelCapture
: Sebuah versi darionWheel
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 sebagaitrue
ataufalse
, mengaktifkan atau menonaktifkan pemeriksaan ejaan.tabIndex
: Sebuah angka. Menimpa perilaku bawaan dari tombol Tab. Hindari penggunaan nilai selain-1
dan0
.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 fungsiEvent
handler. Aktif saat sebuah form mengalami pengaturan ulang(reset).onResetCapture
: Sebuah versi darionReset
yang aktif pada fase penangkapan.onSubmit
: Sebuah fungsiEvent
handler. Aktif saat sebuah form dikirim.onSubmitCapture
: Sebuah versi darionSubmit
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 fungsiEvent
handler. Aktif saat pengguna mencoba untuk mengabaikan/menutup dialog.onCancelCapture
: Sebuah versi darionCancel
yang aktif pada fase penangkapan.onClose
: Sebuah fungsiEvent
handler. Aktif saat sebuah dialog telah ditutup.onCloseCapture
: Sebuah versi darionClose
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 fungsiEvent
handler. Aktif saat pengguna mengaktifkan detailnya.onToggleCapture
: Sebuah versi darionToggle
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 fungsiEvent
handler. Aktif saat sumber daya telah dimuat.onLoadCapture
: Sebuah versi darionLoad
yang aktif pada fase penangkapan.onError
: Sebuah fungsiEvent
handler. Aktif saat sumber daya tidak dapat dimuat.onErrorCapture
: Sebuah versi darionError
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 fungsiEvent
handler. Aktif saat sumber daya belum sepenuhnya dimuat, tetapi bukan karena adanya kesalahan.onAbortCapture
: Sebuah versi darionAbort
yang aktif pada fase penangkapan.onCanPlay
: Sebuah fungsiEvent
handler. Aktif saat terdapat cukup data sehingga dapat dimulai, tetapi belum cukup untuk diputar hingga akhir tanpa adanya buffering.onCanPlayCapture
: Sebuah versi darionCanPlay
yang aktif pada fase penangkapan.onCanPlayThrough
: Sebuah fungsiEvent
handler. Aktif saat terdapat cukup data yang memungkinkan untuk diputar dari awal hingga akhir tanpa adanya buffering.onCanPlayThroughCapture
: Sebuah versi darionCanPlayThrough
yang aktif pada fase penangkapan.onDurationChange
: Sebuah fungsiEvent
handler. Aktif saat durasi dari media berubah/diperbarui.onDurationChangeCapture
: Sebuah versi darionDurationChange
yang aktif pada fase penangkapan.onEmptied
: Sebuah fungsiEvent
handler. Aktif saat media telah menjadi kosong.onEmptiedCapture
: Sebuah versi darionEmptied
yang aktif pada fase penangkapan.onEncrypted
: Sebuah fungsiEvent
handler. Aktif saat peramban web (browser) menemukan media yang terenkripsi.onEncryptedCapture
: Sebuah versi darionEncrypted
yang aktif pada fase penangkapan.onEnded
: Sebuah fungsiEvent
handler. Aktif saat pemutaran berhenti karena tidak ada yang tersisa untuk diputar.onEndedCapture
: Sebuah versi darionEnded
yang aktif pada fase penangkapan.onError
: Sebuah fungsiEvent
handler. Aktif saat terdapat sumber daya yang tidak dapat dimuat.onErrorCapture
: Sebuah versi darionError
yang aktif pada fase penangkapan.onLoadedData
: Sebuah fungsiEvent
handler. Aktif saat frame pemutaran sekarang berhasil dimuat.onLoadedDataCapture
: Sebuah versi darionLoadedData
yang aktif pada fase penangkapan.onLoadedMetadata
: Sebuah fungsiEvent
handler. Aktif saat metadata berhasil dimuat.onLoadedMetadataCapture
: Sebuah versi darionLoadedMetadata
yang aktif pada fase penangkapan.onLoadStart
: Sebuah fungsiEvent
handler. Aktif saat peramban web (browser) mulai untuk memuat sumber daya.onLoadStartCapture
: Sebuah versi darionLoadStart
yang aktif pada fase penangkapan.onPause
: Sebuah fungsiEvent
handler. Aktif saat media dijeda.onPauseCapture
: Sebuah versi darionPause
yang aktif pada fase penangkapan.onPlay
: Sebuah fungsiEvent
handler. Aktif saat media sudah tidak lagi dijeda.onPlayCapture
: Sebuah versi darionPlay
yang aktif pada fase penangkapan.onPlaying
: Sebuah fungsiEvent
handler. Aktif saat media mulai atau media terulang kembali.onPlayingCapture
: Sebuah versi darionPlaying
yang aktif pada fase penangkapan.onProgress
: Sebuah fungsiEvent
handler. Aktif secara periodik ketika sumber daya sedang memuat.onProgressCapture
: Sebuah versi darionProgress
yang aktif pada fase penangkapan.onRateChange
: Sebuah fungsiEvent
handler. Aktif saat adanya perubahan pada tingkat pemutaran (playback rate).onRateChangeCapture
: Sebuah versi darionRateChange
yang aktif pada fase penangkapan.onResize
: Sebuah fungsiEvent
handler. Aktif saat ukuran dari video berubah.onResizeCapture
: Sebuah versi darionResize
yang aktif pada fase penangkapan.onSeeked
: Sebuah fungsiEvent
handler. Aktif saat operasi pencarian selesai.onSeekedCapture
: Sebuah versi darionSeeked
yang aktif pada fase penangkapan.onSeeking
: Sebuah fungsiEvent
handler. Aktif saat operasi pencari dimulai.onSeekingCapture
: Sebuah versi darionSeeking
yang aktif pada fase penangkapan.onStalled
: Sebuah fungsiEvent
handler. Aktif saat peramban web (browser) sedang menunggu data tetapi tetap tidak memuat.onStalledCapture
: Sebuah versi darionStalled
yang aktif pada fase penangkapan.onSuspend
: Sebuah fungsiEvent
handler. Aktif saat proses memuat sumber daya dihentikan.onSuspendCapture
: Sebuah versi darionSuspend
yang aktif pada fase penangkapan.onTimeUpdate
: Sebuah fungsiEvent
handler. Aktif saat adanya perubahan pada waktu dari pemutaran sekarang.onTimeUpdateCapture
: Sebuah versi darionTimeUpdate
yang aktif pada fase penangkapan.onVolumeChange
: Sebuah fungsiEvent
handler. Aktif saat adanya perubahan pada volume.onVolumeChangeCapture
: Sebuah versi darionVolumeChange
yang aktif pada fase penangkapan.onWaiting
: Sebuah fungsiEvent
handler. Aktif saat pemutaran dihentikan karena ada kekurangan data sementara.onWaitingCapture
: Sebuah versi darionWaiting
yang aktif pada fase penangkapan.
Peringatan
- Anda tidak bisa mengoper
children
dandangerouslySetInnerHTML
secara bersamaan. - Beberapa event (seperti
onAbort
danonLoad
) 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 ataunull
. React akan mengoper kepada anda node DOM saat ref terpasang, dannull
saat ref dilepas. Kecuali, jika anda mengoper referensi fungsi yang sama untuk callbackref
pada setiap render, callback tersebut akan secara sementara dilepaskan dan dipasang kembali pada setiap render ulang dari komponen tersebut.
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 apakahpreventDefault
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 DOMEvent
. 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 apakahpreventDefault
dipanggil.isPropagationStopped()
: Mengembalikan sebuah nilai boolean yang mengindikasikan apakahstopPropagation
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 apakahpersist
telah dipanggil.
Peringatan
- Nilai dari
currentTarget
,eventPhase
,target
, dantype
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 dengane.nativeEvent.currentTarget
. Untuk polyfilled events,e.type
(Tipe event React) mungkin berbeda dengane.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 propertiAnimationEvent
:
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 propertiClipboardEvent
:
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 propertiCompositionEvent
:
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 propertiDragEvent
: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
:
Fungsi FocusEvent
handler
Sebuah tipe event handler untuk events fokus.
<input
onFocus={e => console.log('onFocus')}
onBlur={e => console.log('onBlur')}
/>
Parameter
-
e
: Sebuah objek event React dengan tambahan propertiFocusEvent
:Ini juga termasuk properti yang diturunkan oleh
UIEvent
:
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 propertiInputEvent
:
Fungsi KeyboardEvent
handler
Sebuah tipe event handler untuk event papan ketik (keyboard).
<input
onKeyDown={e => console.log('onKeyDown')}
onKeyUp={e => console.log('onKeyUp')}
/>
Parameters
-
e
: Sebuah objek event React dengan tambahan propertiKeyboardEvent
:altKey
charCode
code
ctrlKey
getModifierState(key)
key
keyCode
locale
metaKey
location
repeat
shiftKey
which
Ini juga termasuk properti yang diturunkan oleh
UIEvent
:
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')}
/>
Parameter
-
e
: Sebuah objek event React dengan tambahan propertiMouseEvent
: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
:
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')}
/>
Parameters
-
e
: Sebuah objek event React dengan tambahan propertiPointerEvent
: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
:
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 propertiTouchEvent
:Ini juga termasuk properti yang diturunkan oleh
UIEvent
:
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 propertiTransitionEvent
:
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 propertiUIEvent
:
Fungsi WheelEvent
handler
Sebuah tipe event handler untuk event onWheel
.
<div
onWheel={e => console.log('onWheel')}
/>
Parameter
-
e
: Sebuah objek event React dengan tambahan propertiWheelEvent
: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
:
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.
export default function Avatar({ pengguna }) { return ( <img src={pengguna.urlGambar} alt={'Foto dari ' + pengguna.nama} className="avatar" style={{ width: pengguna.ukuranGambar, height: pengguna.ukuranGambar }} /> ); }
Pendalaman
Untuk menerapkan kelas CSS secara kondisional, Anda perlu menghasilkan string className
dengan JavaScript.
Sebagai contoh, className={'baris ' + (sedangDipilih ? 'dipilih': '')}
akan menghasilkan antara className="baris"
atau className="baris dipilih"
tergantung apakah nilai dari sedangDipilih
adalah true
.
Untuk membuatnya lebih mudah dipaca, anda dapat menggunakan library bantuan seperti classnames
:
import cn from 'classnames';
function Baris({ sedangDipilih }) {
return (
<div className={cn('baris', sedangDipilih && 'dipilih')}>
...
</div>
);
}
Ini sangat mudah jika Anda memiliki beberapa kelas kondisional:
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.
import { useRef } from 'react'; export default function Form() { const refMasukkan = useRef(null); function handleKlik() { refMasukkan.current.focus(); } return ( <> <input ref={refMasukkan} /> <button onClick={handleKlik}> Fokus pada input </button> </> ); }
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:
import { Remarkable } from 'remarkable'; const md = new Remarkable(); function renderMarkdownKeHTML(markdown) { // Ini HANYA aman karena keluaran HTML // ditampilkan kepada pengguna yang sama, dan karena Anda // percayakan parser Markdown ini untuk tidak memiliki bug. const renderedHTML = md.render(markdown); return {__html: renderedHTML}; } export default function MarkdownPreview({ markdown }) { const markup = renderMarkdownKeHTML(markdown); return <div dangerouslySetInnerHTML={markup} />; }
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.
export default function ContohMouse() { return ( <div onMouseEnter={e => console.log('onMouseEnter (parent)')} onMouseLeave={e => console.log('onMouseLeave (parent)')} > <button onClick={e => console.log('onClick (Tombol Pertama)')} onMouseDown={e => console.log('onMouseDown (Tombol Pertama)')} onMouseEnter={e => console.log('onMouseEnter (Tombol Pertama)')} onMouseLeave={e => console.log('onMouseLeave (Tombol Pertama)')} onMouseOver={e => console.log('onMouseOver (Tombol Pertama)')} onMouseUp={e => console.log('onMouseUp (Tombol Pertama)')} > Tombol Pertama </button> <button onClick={e => console.log('onClick (Tombol Kedua)')} onMouseDown={e => console.log('onMouseDown (Tombol Kedua)')} onMouseEnter={e => console.log('onMouseEnter (Tombol Kedua)')} onMouseLeave={e => console.log('onMouseLeave (Tombol Kedua)')} onMouseOver={e => console.log('onMouseOver (Tombol Kedua)')} onMouseUp={e => console.log('onMouseUp (Tombol Kedua)')} > Tombol Kedua </button> </div> ); }
Penanganan events penunjuk
Contoh dibawah ini menunjukkan beberapa events penunjuk umum dan saat mereka aktif.
export default function ContohPenunjuk() { return ( <div onPointerEnter={e => console.log('onPointerEnter (parent)')} onPointerLeave={e => console.log('onPointerLeave (parent)')} style={{ padding: 20, backgroundColor: '#ddd' }} > <div onPointerDown={e => console.log('onPointerDown (Child Pertama)')} onPointerEnter={e => console.log('onPointerEnter (Child Pertama)')} onPointerLeave={e => console.log('onPointerLeave (Child Pertama)')} onPointerMove={e => console.log('onPointerMove (Child Pertama)')} onPointerUp={e => console.log('onPointerUp (Child Pertama)')} style={{ padding: 20, backgroundColor: 'lightyellow' }} > Child Pertama </div> <div onPointerDown={e => console.log('onPointerDown (Child Kedua)')} onPointerEnter={e => console.log('onPointerEnter (Child Kedua)')} onPointerLeave={e => console.log('onPointerLeave (Child Kedua)')} onPointerMove={e => console.log('onPointerMove (Child Kedua)')} onPointerUp={e => console.log('onPointerUp (Child Kedua)')} style={{ padding: 20, backgroundColor: 'lightblue' }} > Child Kedua </div> </div> ); }
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.
export default function ContohFokus() { return ( <div tabIndex={1} onFocus={(e) => { if (e.currentTarget === e.target) { console.log('parent yang difokus'); } else { console.log('child yang difokus', e.target.name); } if (!e.currentTarget.contains(e.relatedTarget)) { // Tidak terpicu saat bertukar fokus di antara children console.log('fokus memasukki parent'); } }} onBlur={(e) => { if (e.currentTarget === e.target) { console.log('parent yang tidak difokus'); } else { console.log('child yang tidak difokus', e.target.name); } if (!e.currentTarget.contains(e.relatedTarget)) { // Tidak terpicu saat bertukar fokus di antara children console.log('fokus meninggalkan parent'); } }} > <label> Nama Pertama: <input name="namaPertama" /> </label> <label> Nama Akhir: <input name="namaAkhir" /> </label> </div> ); }
Penanganan events papan ketik (keyboard).
Contoh dibawah ini menunjukkan beberapa events papan ketik (keyboard) umum dan saat mereka aktif.
export default function ContohKeyboard() { return ( <label> Nama Pertama: <input name="namaPertama" onKeyDown={e => console.log('onKeyDown:', e.key, e.code)} onKeyUp={e => console.log('onKeyUp:', e.key, e.code)} /> </label> ); }