Penggunaan Hook useRef untuk DOM dalam React

Dalam salah satu pelajaran sebelumnya, kami ada menyebutkan, bahawa ref paling kerap digunakan untuk mengakses elemen DOM.

Ref akan datang untuk menyelamatkan apabila anda, sebagai contoh, perlu memfokus pada elemen, membuat skrol atau mengira saiz dan posisinya, atau mungkin menggunakan beberapa kaedah atau sifatnya, kerana untuk perkara seperti itu dalam React tiada kaedah terbina dalam.

Mari kita lihat contoh dengan input, bagaimana ia dilakukan. Mari buat komponen dengan input dan butang:

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

Sebagai permulaan, import ke dalam komponen useRef:

import { useRef } from 'react';

Dan buat ref ref dalam komponen. Mulakan nilainya dengan null:

const ref = useRef(null);

Letakkan pengendali klik pada butang:

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

Untuk mempunyai akses kepada input, catat ref kami ref dalam atribut ref input. Dengan cara ini, apabila React mencipta nod DOM untuk input ini, ia akan meletakkan rujukan kepadanya dalam ref.current dan kami akan dapat menggunakan kaedah input:

<input ref={ref} />

Dan akhirnya, tambah fungsi pengendalian klik, supaya apabila butang diklik, fokus diberikan kepada input. Sekarang kami boleh melakukannya melalui ref, yang mengandungi rujukan kepada input kami, dengan mengakses kaedahnya focus:

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

Cuba tekan butang dan pastikan bahawa fokus diberikan kepada input.

Ambil kod komponen App, yang kami tulis dalam pelajaran ini dan buat supaya apabila butang diklik, selain memberi fokus pada input, medan input juga dibersihkan. Gunakan untuk ini sifat value input.