रिएक्ट के साथ रेंडर करने के बाद एलिमेंट पर फोकस कैसे सेट करें

परिचय

किसी तत्व पर फ़ोकस सेट करके, हम उपयोगकर्ता को अगले अपेक्षित इनपुट फ़ील्ड के लिए धीरे-धीरे निर्देशित करते हैं, जिससे उन्हें कम अनुमान के साथ बेहतर ब्राउज़िंग अनुभव मिलता है।

इस लेख में, हम सीखेंगे कि हमारे रिएक्ट एप्लिकेशन या रिएक्ट घटक को प्रस्तुत करने के बाद किसी तत्व पर फ़ोकस कैसे सेट किया जाए।

पारंपरिक HTML में, का उपयोग करके किसी तत्व को फ़ोकस करने के लिए सेट करना आसान था autofocus हमारे भीतर विशेषता टैग, जो एक बूलियन विशेषता है और डिफ़ॉल्ट रूप से सेट है false. यह ब्राउज़र को उस विशिष्ट इनपुट फ़ील्ड पर ध्यान केंद्रित करने का निर्देश देता है, और उपयोगकर्ता तुरंत मान दर्ज करना शुरू कर सकता है:

<form>
    <input type="text" autofocus> // Will focus
    <input type="text"> // Won't focus
</form>

यह हमारे रिएक्ट एप्लिकेशन में भी काम करेगा। फिर भी, जब हम अधिक प्रोग्रामेटिक नियंत्रण के साथ प्रतिपादन के बाद किसी तत्व पर ध्यान केंद्रित करना चाहते हैं - हम इसका उपयोग कर सकते हैं useEffect() कार्यात्मक घटकों में हुक और componentDidMount() वर्ग घटकों में जीवनचक्र विधि।

फंक्शनल कंपोनेंट्स में रेंडरिंग के बाद एलिमेंट पर फोकस कैसे सेट करें

पहले, रिएक्ट हुक की शुरुआत से पहले, हम कार्यात्मक घटकों के साथ इस तरह के संचालन को संभाल नहीं सकते थे।

हुक की शुरुआत के बाद से, हम जान सकते हैं कि हमारा एप्लिकेशन/घटक कब पूरी तरह से रेंडर हो गया है ताकि हम इसका उपयोग करके विशिष्ट क्रियाएं कर सकें useEffect() अंकुश। हमारे पास तक भी पहुंच है useRef() हुक, जिसका उपयोग हम किसी विशेष तत्व को सीधे संदर्भित करने के लिए कर सकते हैं।

मान लीजिए कि हमारे पास दो फ़ील्ड वाला एक फॉर्म है, और हम चाहते हैं कि घटक रेंडर होने के बाद फ़ील्ड में से एक को फ़ोकस पर सेट किया जाए:

const App = () => {
    return (
        <div className='container'>
            <form>
                <input type="text" placeholder='This has focus' />
                <input type="text" placeholder='No focus when we render' />
            </form>
        </div>
    )
}
export default App;

आइए का उपयोग करके इनपुट का संदर्भ प्राप्त करके आरंभ करें useRef() प्रतिक्रिया हुक। ऐसा करने के लिए, हम पहले आयात करेंगे useRef() प्रतिक्रिया से, एक बनाएँ ref और इसके मान को डिफ़ॉल्ट रूप से शून्य पर सेट करें और फिर बनाए गए को संलग्न करें ref के माध्यम से हमारे प्रतिक्रिया तत्व के लिए ref विशेषता:

import { useRef } from 'react';

const App = () => {
    const inputReference = useRef(null);

    return (
        <div className='container'>
            <form>
                <input type="text" ref={inputReference} placeholder='This has focus' />
                <input type="text" placeholder='No focus when we render' />
            </form>
        </div>
    )
}
export default App;

नोट: ध्यान दें कि हमने केवल इनपुट तत्वों में से एक के लिए बनाए गए संदर्भ को संलग्न किया है, जिसे हम फोकस करने के लिए सेट करना चाहते हैं।

आइए अब उपयोग करने के लिए आगे बढ़ें useEffect() हमारे आवेदन को प्रस्तुत करने के बाद तत्व पर फ़ोकस जोड़ने के लिए हुक:

import { useRef, useEffect } from 'react'

const App = () => {
    const inputReference = useRef(null);

    useEffect(() => {
        
    }, [])

    return (
        <div className='container'>
            <form>
                <input type="text" ref={inputReference} placeholder='This has focus' />
                <input type="text" placeholder='No focus when we render' />
            </form>
        </div>
    )
}
export default App;

उपरोक्त कोड में, ध्यान दें कि हमने आयात किया है useEffect() हुक और फिर एक खाली निर्भरता सरणी के साथ हुक का उपयोग किया ([]) यह सुनिश्चित करने के लिए कि यह केवल तभी सक्रिय होता है जब घटक प्रारंभ में माउंट होता है। अंत में, संदर्भित तत्व पर ध्यान केंद्रित करने के लिए, हम रेफरी के माध्यम से पहुंचेंगे current विशेषता और फिर संलग्न करें focus() तरीका:

useEffect(() => {
    inputReference.current.focus();
}, [])

इस बिंदु पर, जब हमारा एप्लिकेशन या घटक प्रस्तुत करता है, तो संदर्भित तत्व स्वचालित रूप से केंद्रित हो जाएगा:

import { useRef, useEffect } from 'react';

const App = () => {
    const inputReference = useRef(null);

    useEffect(() => {
        inputReference.current.focus();
    }, []);

    return (
        <div className='container'>
            <form>
                <input type="text" ref={inputReference} placeholder='This has focus' />
                <input type="text" placeholder='No focus when we render' />
            </form>
        </div>
    )
}
export default App;

क्लास कंपोनेंट्स में रेंडरिंग के बाद एलिमेंट पर फोकस कैसे सेट करें

अब तक, हमने देखा है कि कैसे एक कार्यात्मक घटक के साथ एक तत्व पर ध्यान केंद्रित करना है, लेकिन यह वर्ग घटकों के साथ एक पूरी तरह से अलग वाक्यविन्यास है क्योंकि हम अब हुक का उपयोग नहीं करते हैं क्योंकि वे केवल कार्यात्मक घटकों में काम करते हैं। कक्षा के घटकों में, हम अपना रेफरी बनाते हैं constructor() विधि और का उपयोग करें componentDidMount() एक बार हमारे आवेदन प्रस्तुत करने के बाद संदर्भित तत्व को फ़ोकस करने के लिए सेट करने की विधि:

import React, { Component } from 'react';

export class App extends Component {
    constructor(props) {
        super(props);
        this.inputReference = React.createRef();
    }

    componentDidMount() {
        this.inputReference.current.focus();
    }

    render() {
        return (
            <div className='container'>
                <form>
                    <input type="text" ref={this.inputReference} placeholder='This has focus' />
                    <input type="text" placeholder='No focus when we render' />
                </form>
            </div>
        )
    }
}
export default App;

उपरोक्त कोड में, हमने इस्तेमाल किया constructor() एक संदर्भ बनाने की विधि, जिसे हमने इनपुट तत्व से जोड़ा है:

constructor(props) {
    super(props);
    this.inputReference = React.createRef();
}

हमने तब इस्तेमाल किया था componentDidMount() जीवनचक्र विधि, जो बहुत समान है useEffect() हुक, यह सुनिश्चित करने के लिए कि हमारे एप्लिकेशन/घटक प्रस्तुत होने के बाद तत्व फोकस पर सेट हो गया है:

componentDidMount() {
    this.inputReference.current.focus();
}

निष्कर्ष

इस लेख में, हमने सीखा है कि एक बार हमारे एप्लिकेशन या कंपोनेंट क्लास और फंक्शनल दोनों कंपोनेंट्स में रेंडर होने के बाद एक इनपुट फील्ड का उपयोग करके एक एलिमेंट को फोकस करने के लिए कैसे सेट किया जाए। दोनों विधियां समान हैं लेकिन अलग-अलग वाक्यविन्यास हैं क्योंकि वे दो अलग-अलग प्रकार के घटक हैं।