Refs DOM

Apa itu Refs ?

• Refs adalah metode untuk mendapatkan nilai reference
pada sebuah elemen DOM
• Refs menyediakan akses ke node DOM atau elemen React
yang dibuat pada method render
• Reference berguna untuk memodifikasi elemen DOM atau
untuk mendapatkan nilai pada elemen input form
Kapan Menggunakan Refs
• Mengelola focus input, memilih text, atau media playback
(video, audio, dll)
• Triggering imperactive animations
• Mengintegrasikan dengan library DOM pihak ketiga
Membuat Refs
• Gunakan perintah React.createRef() membuat refs dan
attach ke elemen DOM dengan attribute ref
• Refs ditetapkan ke instance property ketika komponen
agar dapat direferensikan di seluruh komponen
Akses Refs
• Gunakan attribute current setelah Refs diattach ke
elemen render
• Refs tidak dapat digunakan pada functional components
karena tidak memiliki instances
Refs Ke Parent Components
• Pada kasus tertentu terkadang perlu mengirimkan refs ke
parent component
• Gunakan refs callback & props
Fungsi Reference
• Berikut adalah fungsi reference yang sering digunakan :
Fungsi References Keterangan

refElement.value() Memberikan value terhadap elemen tersebut

refElement.focus() Set focus ke elemen, biasanya pada elemen input

refElement.blur() Menghilangkan focus cursor pada elemen

refElement.getAttribute() Mendapatkan attribute pada elemen

refElement.style() Memberikan nilai style (css) pada elemen

Penggunaan Refs Berlebihan (-)
• Menghambat kerja plugin Babel inline yang dioptimalkan
• Penggunaan Refs berlebihan malah menjauhkan konsep
React sebenarnya yang sudah memiliki fitur state
• Penggunaan Refs berlebihan pada akhirnya masuk ke
konsep Jquery bukan Reactjs
Question & Answers
 Thank You

Suminar Ariwibowo, S.Kom

Phone & WA : 0853 6090 5815
Email : suminarariwibowo@gmail.com