ری ایکٹ کے ساتھ رینڈرنگ کے بعد عنصر پر فوکس کیسے سیٹ کریں۔

تعارف

کسی عنصر پر توجہ مرکوز کر کے، ہم صارف کو کم قیاس کے ساتھ بہتر براؤزنگ کا تجربہ فراہم کرتے ہوئے، اگلے متوقع ان پٹ فیلڈ میں نرمی سے رہنمائی کرتے ہیں۔

اس آرٹیکل میں، ہم سیکھیں گے کہ اپنی React ایپلیکیشن یا React جز کو پیش کرنے کے بعد کسی عنصر پر فوکس کیسے قائم کیا جائے۔

روایتی ایچ ٹی ایم ایل میں، کا استعمال کرتے ہوئے فوکس کرنے کے لیے عنصر کو سیٹ کرنا آسان تھا۔ autofocus ہمارے اندر وصف ٹیگ، جو ایک بولین وصف ہے اور بطور ڈیفالٹ سیٹ ہے۔ false. یہ براؤزر کو اس مخصوص ان پٹ فیلڈ پر توجہ مرکوز کرنے کی ہدایت کرتا ہے، اور صارف فوری طور پر اقدار درج کرنا شروع کر سکتا ہے:

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

یہ ہماری React ایپلی کیشنز میں بھی کام کرنے والا ہے۔ پھر بھی، جب ہم زیادہ پروگرامیٹک کنٹرول کے ساتھ پیش کرنے کے بعد کسی عنصر پر توجہ مرکوز کرنا چاہتے ہیں - تو ہم اس کا استعمال کر سکتے ہیں useEffect() فعال اجزاء میں ہک اور componentDidMount() کلاس کے اجزاء میں لائف سائیکل کا طریقہ۔

فنکشنل اجزاء میں رینڈرنگ کے بعد عنصر پر فوکس کیسے سیٹ کریں۔

اس سے پہلے، React ہکس کے تعارف سے پہلے، ہم فنکشنل اجزاء کے ساتھ اس طرح کی کارروائیوں کو نہیں سنبھال سکتے تھے۔

ہکس کے متعارف ہونے کے بعد سے، ہم یہ جان سکتے ہیں کہ ہماری ایپلیکیشن/جزو کب مکمل طور پر رینڈر ہو چکا ہے تاکہ ہم اس کا استعمال کرتے ہوئے مخصوص اعمال انجام دے سکیں۔ 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() رد عمل سے، تخلیق a ref اور اس کی قدر کو بطور ڈیفالٹ null پر سیٹ کریں اور پھر تخلیق شدہ کو منسلک کریں۔ 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 attribute اور پھر منسلک کریں۔ 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() hook، اس بات کو یقینی بنانے کے لیے کہ ہماری ایپلیکیشن/جزاء رینڈر ہونے کے بعد عنصر فوکس پر سیٹ ہو جائے:

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

نتیجہ

اس آرٹیکل میں، ہم نے سیکھا ہے کہ کلاس اور فنکشنل دونوں حصوں میں ہماری ایپلیکیشن یا جزو رینڈر ہونے کے بعد ان پٹ فیلڈ کا استعمال کرتے ہوئے ایک عنصر کو فوکس کرنے کے لیے کس طرح سیٹ کرنا ہے۔ دونوں طریقے ایک جیسے ہیں لیکن ان کا نحو مختلف ہے کیونکہ وہ دو مختلف قسم کے اجزاء ہیں۔