React में DOM के लिए useRef हुक का उपयोग

पिछले पाठों में से एक में हमने उल्लेख किया था, कि सबसे अधिक बार refs का उपयोग DOM तत्वों तक पहुंच के लिए किया जाता है।

Refs तब काम आएंगे जब आपको, उदाहरण के लिए, किसी तत्व पर फोकस करने, स्क्रॉल करने या उसके आकार और स्थिति की गणना करने की आवश्यकता हो, या संभवतः उसके कुछ तरीकों या गुणों का उपयोग करने की आवश्यकता हो, क्योंकि React में ऐसी चीजों के लिए अंतर्निहित तरीके नहीं हैं।

आइए एक इनपुट के उदाहरण पर देखें, यह कैसे किया जाता है। आइए एक इनपुट और बटन के साथ एक घटक बनाएं:

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

शुरुआत के लिए, घटक में useRef आयात करें:

import { useRef } from 'react';

और घटक में एक ref ref बनाएं। इसे null मान से प्रारंभ करें:

const ref = useRef(null);

बटन पर क्लिक हैंडलर लगाएं:

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

इनपुट तक पहुंचने के लिए, अपना ref ref इनपुट के ref विशेषता में लिखें। इस तरह, जब React इस इनपुट के लिए DOM नोड बनाएगा, तो वह इसके लिए संदर्भ ref.current में रख देगा और हम इनपुट के तरीकों का उपयोग कर पाएंगे:

<input ref={ref} />

और अंत में, क्लिक हैंडलिंग फ़ंक्शन जोड़ें, ताकि बटन पर क्लिक करने पर, इनपुट पर फोकस हो। अब हम यह ref के माध्यम से कर सकते हैं, जिसमें हमारे इनपुट का लिंक है, इसके तरीके focus का उपयोग करके:

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

बटन दबाएं और सुनिश्चित करें, कि इनपुट पर फोकस हो रहा है।

App घटक का कोड लें, जो हमने इस पाठ में लिखा था और ऐसा करें कि बटन पर क्लिक करने पर इनपुट में फोकस करने के अलावा इनपुट फ़ील्ड साफ़ भी हो जाए। इसके लिए इनपुट के गुण value का उपयोग करें।