Ужыванне хука useRef для DOM у React

На адным з папярэдніх заняткаў мы ўзгадвалі, што найчасцей рэфы прымяняюцца для доступу да DOM элементаў.

Рэфы прыйдуць на дапамогу тады, калі вам, напрыклад, трэба сфакусавацца на элеменце, зрабіць скрол або вылічыць яго памеры і пазіцыю, а магчыма скарыстацца якімісьці яго метадамі ці ўласцівасцямі, бо для такіх рэчаў у React няма ўбудаваных метадаў.

Давайце паглядзім на прыкладзе з інпутам, як гэта робіцца. Стварым кампанент з інпутам і кнопкай:

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

Для пачатку, імпартуем у кампанент useRef:

import { useRef } from 'react';

І завядзем рэф ref у кампаненце. Ініцыялізуем яго значэннем null:

const ref = useRef(null);

Навясём на кнопачку апрацоўшчык кліку:

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

Каб мець доступ да інпута, запішам наш рэф ref у атрыбут ref інпута. Такім чынам, калі React будзе ствараць DOM вузел для гэтага інпута, ён пакладзе спасылку на яго ў ref.current і мы зможам карыстацца метадамі інпута:

<input ref={ref} />

І нарэшце, дадамо функцыю апрацоўкі кліку, каб пры кліку на кнопку, на інпут наводзіўся фокус. Цяпер мы можам гэта зрабіць праз рэф, у якім ляжыць спасылка на наш інпут, звярнуўшыся да яго метаду focus:

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

Панаціскайце кнопачку і пераканайцеся, што на інпут наводзіцца фокус.

Вазьміце код кампанента App, які мы напісалі на гэтым уроку і зрабіце так, каб па кліку на кнопку ў інпуце акрамя навядзення фокусу адбывалася яшчэ і ачыщэнне поля ўводу. Скарыстайцеся для гэтага ўласцівасцю value інпута.