Referensi API
Komponen

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>) 

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

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

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

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

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

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.

Pengembalian (Returns)

Jangan menggembalikan apa pun pada callback ref.

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:

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

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

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

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

Fungsi FocusEvent handler

Sebuah tipe event handler untuk events fokus.

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

Lihat Contoh.

Parameter

Fungsi Event handler

Sebuah tipe event handler untuk events umum.

Parameters

Fungsi InputEvent handler

Sebuah tipe event handler untuk event onBeforeInput.

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

Parameter

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

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

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

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

Fungsi TransitionEvent handler

Sebuah tipe event handler untuk events transisi CSS.

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

Parameter

Fungsi UIEvent handler

Sebuah tipe event handler untuk events UI umum.

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

Parameters

Fungsi WheelEvent handler

Sebuah tipe event handler untuk event onWheel.

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

Parameter

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

Bagaimana cara menerapkan beberapa kelas CSS secara kondisional?

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>
  );
}
SebelumnyaKomponen
Selanjutnya<form>

Seberapa suka Anda dengan dokumentasi ini?