Реакт дар DOM бо хуки useRef истифода бурдан

Дар яке аз дарсҳои қаблӣ мо зикр кардем, ки бештар рефҳо барои дастрасӣ ба элементҳои 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 воридшавӣ истифода баред.