Penerapan Hook useRef untuk DOM di React

Pada salah satu pelajaran sebelumnya, kami menyebutkan, bahwa ref paling sering digunakan untuk mengakses elemen DOM.

Ref akan datang untuk menyelamatkan ketika Anda, contohnya, perlu memfokuskan pada elemen, melakukan scroll atau menghitung ukurannya dan posisi, atau mungkin menggunakan beberapa metode atau propertinya, karena untuk hal-hal seperti itu di React tidak ada metode bawaan.

Mari kita lihat contoh dengan input, bagaimana hal itu dilakukan. Mari buat komponen dengan input dan tombol:

return (
	<div>
		<input />
		<button>focus</button>
	</div>
);

Pertama-tama, impor ke dalam komponen useRef:

import { useRef } from 'react';

Dan buatlah ref ref dalam komponen. Inisialisasi dengan nilai null:

const ref = useRef(null);

Pasang pada tombol handler klik:

<button onClick={handleClick}>focus</button>

Untuk memiliki akses ke input, tulis ref ref kita ke dalam atribut ref input. Dengan demikian, ketika React membuat DOM node untuk input ini, dia akan menaruh referensi ke dalamnya di ref.current dan kita akan dapat menggunakan metode input:

<input ref={ref} />

Dan akhirnya, tambahkan fungsi penanganan klik, sehingga ketika tombol diklik, input diarahkan fokus. Sekarang kita bisa melakukannya melalui ref, di mana terdapat referensi ke input kita, dengan mengakses metodenya focus:

function handleClick() {
	ref.current.focus();
}

Coba tekan tombolnya dan pastikan, bahwa fokus diarahkan ke input.

Ambil kode komponen App, yang kami tulis dalam pelajaran ini dan buatlah sehingga ketika tombol diklik pada input selain pengarahan fokus terjadi juga pembersihan field input. Gunakan untuk ini properti value dari input.