React တွင် DOM အတွက် useRef ဟုက်ကို အသုံးပြုခြင်း

ယခင်သင်ခန်းစာတစ်ခုတွင်၊ refs များကို DOM element များကို လက်လှမ်းမီရန် အများဆုံးအသုံးပြုကြောင်း ဖော်ပြခဲ့ပါသည်။

ဥပမာ၊ element တစ်ခုပေါ်တွင် အာရုံစိုက်ရန်၊ scroll လုပ်ရန် သို့မဟုတ် ၎င်း၏အရွယ်အစားနှင့် တည်နေရာကို တွက်ချက်ရန် လိုအပ်သည့်အခါ၊ သို့မဟုတ် ၎င်း၏ method များ သို့မဟုတ် property များကို အသုံးပြုလိုသည့်အခါ refs များက အကူအညီပေးပါလိမ့်မည်။ ဤကဲ့သို့သော အရာများအတွက် React တွင် တည်ဆောက်ထားသော method များ မရှိသောကြောင့်ဖြစ်သည်။

input နှင့်ဥပမာတစ်ခုကို ကြည့်ကြပါစို့။ input နှင့် button ပါသော component တစ်ခုကို ဖန်တီးကြပါမည်။

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

ပထမဦးစွာ၊ component ထဲသို့ useRef ကို import လုပ်ပါမည်။

import { useRef } from 'react';

Component ထဲတွင် ref ref တစ်ခု သတ်မှတ်ပါမည်။ ၎င်းကို null တန်ဖိုးဖြင့် အစပြုပါမည်။

const ref = useRef(null);

button ပေါ်တွင် ကလစ်နှိပ်ခြင်း လုပ်ဆောင်ချက် တစ်ခုကို ထည့်သွင်းပါမည်။

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

input ကို လက်လှမ်းမီနိုင်ရန်၊ ကျွန်ုပ်တို့၏ ref ref ကို input ၏ attribute ref ထဲသို့ ရေးထည့်ပါမည်။ ဤနည်းအားဖြင့်၊ React သည် ဤ input အတွက် DOM node ကို ဖန်တီးသည့်အခါ၊ ၎င်းသည် ၎င်းထံသို့ link တစ်ခုကို ref.current ထဲတွင် ထားရစ်ပြီး ကျွန်ုပ်တို့သည် input ၏ method များကို အသုံးပြုနိုင်မည်ဖြစ်သည်။

<input ref={ref} />

နောက်ဆုံးအနေဖြင့်၊ button ကို ကလစ်နှိပ်လိုက်သည့်အခါ input ပေါ်တွင် အာရုံစိုက်မှု ရောက်စေရန် ကလစ်နှိပ်ခြင်းကို ကိုင်တွယ်သည့် function ကို ထည့်သွင်းပါမည်။ ယခု ကျွန်ုပ်တို့သည် ၎င်းကို ref မှတစ်ဆင့် လုပ်ဆောင်နိုင်ပြီဖြစ်သည်။ ref ထဲတွင် ကျွန်ုပ်တို့၏ input သို့ link တစ်ခု ရှိနေပြီး ၎င်း၏ method focus ကို ခေါ်ယူခြင်းဖြင့် လုပ်ဆောင်နိုင်ပါသည်။

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

Button ကို နှိပ်ကြည့်ပြီး input ပေါ်သို့ အာရုံစိုက်မှု ရောက်ရှိကြောင်း သေချာစေပါ။

ဤသင်ခန်းစာတွင် ကျွန်ုပ်တို့ ရေးသားခဲ့သော App component ၏ code ကို ယူပြီး၊ button ကို ကလစ်နှိပ်လိုက်သည့်အခါ input ထဲတွင် အာရုံစိုက်မှုရောက်ခြင်းအပြင် ထည့်သွင်းမှုကွက်လပ်ကိုလည်း ရှင်းလင်းပေးသည့်အတိုင်း ပြုလုပ်ပါ။ ဤအတွက် input ၏ property value ကို အသုံးပြုပါ။