نحوه تنظیم فوکوس روی عنصر بعد از رندر با React

معرفی

با تنظیم فوکوس روی یک عنصر، کاربر را به آرامی به قسمت ورودی مورد انتظار بعدی هدایت می‌کنیم و تجربه مرور بهتری را با حدس و گمان کمتر به او می‌دهیم.

در این مقاله، نحوه تنظیم فوکوس روی یک عنصر را پس از رندر کردن برنامه React یا کامپوننت React خواهیم آموخت.

در HTML سنتی، تنظیم یک عنصر برای تمرکز با استفاده از آن آسان بود autofocus ویژگی درون ما تگ که یک ویژگی بولی است و به طور پیش فرض روی آن تنظیم شده است false. به مرورگر دستور می دهد تا روی آن فیلد ورودی خاص تمرکز کند و کاربر می تواند بلافاصله شروع به وارد کردن مقادیر کند:

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

این در برنامه های React ما نیز کار خواهد کرد. با این حال، وقتی می‌خواهیم بعد از رندر کردن با کنترل برنامه‌ای بیشتر، فوکوس را روی یک عنصر تنظیم کنیم - می‌توانیم از useEffect() قلاب در اجزای عملکردی و componentDidMount() روش چرخه عمر در اجزای کلاس

نحوه تنظیم فوکوس روی عنصر پس از رندر در اجزای عملکردی

پیش از این، قبل از معرفی قلاب‌های React، نمی‌توانستیم چنین عملیاتی را با اجزای Functional انجام دهیم.

از زمان معرفی هوک‌ها، می‌توانیم بدانیم چه زمانی برنامه/کامپوننت ما به طور کامل رندر شده است تا بتوانیم اقدامات خاصی را با استفاده از useEffect() قلاب. ما همچنین دسترسی به useRef() hook، که می توانیم از آن برای ارجاع مستقیم به یک عنصر خاص استفاده کنیم.

فرض کنید یک فرم با دو فیلد داریم و می‌خواهیم یکی از فیلدها بعد از رندر شدن کامپوننت روی فوکوس تنظیم شود:

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() از React، a را ایجاد کنید ref و مقدار آن را به صورت پیش فرض null قرار دهید و سپس ایجاد شده را ضمیمه کنید ref به عنصر React ما از طریق 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() قلاب کنید و سپس از قلاب با یک آرایه وابستگی خالی استفاده کنید ([]) مطمئن شوید که فقط زمانی که جزء در ابتدا نصب می شود فعال می شود. در نهایت، برای تمرکز عنصر ارجاع شده، از طریق the به ref دسترسی خواهیم داشت 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;

نحوه تنظیم فوکوس روی عنصر پس از رندر در اجزای کلاس

تا کنون، نحوه تنظیم فوکوس روی یک عنصر با یک جزء کاربردی را دیده‌ایم، اما این یک نحو کاملاً متفاوت با اجزای کلاس است، زیرا ما دیگر از قلاب‌ها استفاده نمی‌کنیم زیرا آنها فقط در مؤلفه‌های عملکردی کار می‌کنند. در اجزای کلاس، ما ref خود را در داخل ایجاد می کنیم 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();
}

نتیجه

در این مقاله، ما یاد گرفتیم که چگونه یک عنصر را برای تمرکز با استفاده از یک فیلد ورودی تنظیم کنیم، زمانی که برنامه یا مؤلفه ما در هر دو مؤلفه Class و Functional ارائه شود. هر دو روش یکسان هستند اما نحو متفاوتی دارند زیرا دو نوع مؤلفه متفاوت هستند.