প্রতিক্রিয়া সহ রেন্ডারিংয়ের পরে কীভাবে উপাদানগুলিতে ফোকাস সেট করবেন

ভূমিকা

একটি উপাদানের উপর ফোকাস সেট করার মাধ্যমে, আমরা একজন ব্যবহারকারীকে পরবর্তী প্রত্যাশিত ইনপুট ক্ষেত্রের দিকে মৃদুভাবে গাইড করি, তাদের কম অনুমান সহ আরও ভাল ব্রাউজিং অভিজ্ঞতা প্রদান করি।

এই নিবন্ধে, আমরা শিখব কীভাবে আমাদের প্রতিক্রিয়া অ্যাপ্লিকেশন বা একটি প্রতিক্রিয়া উপাদান রেন্ডার করার পরে একটি উপাদানের উপর ফোকাস সেট করতে হয়।

প্রথাগত 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();
}

উপসংহার

এই নিবন্ধে, আমরা শিখেছি যে কীভাবে আমাদের অ্যাপ্লিকেশন বা কম্পোনেন্ট ক্লাস এবং ফাংশনাল উভয় কম্পোনেন্টে রেন্ডার হয়ে গেলে একটি ইনপুট ফিল্ড ব্যবহার করে ফোকাস করার জন্য একটি উপাদান সেট করতে হয়। উভয় পদ্ধতি একই কিন্তু ভিন্ন সিনট্যাক্স আছে যেহেতু তারা দুটি ভিন্ন ধরনের উপাদান।