React-এ 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 প্রপার্টি ব্যবহার করুন।