كيفية ضبط التركيز على العنصر بعد التقديم باستخدام React

المُقدّمة

من خلال ضبط التركيز على عنصر ما ، فإننا نوجه المستخدم بلطف إلى حقل الإدخال التالي المتوقع ، مما يمنحه تجربة تصفح أفضل مع قدر أقل من التخمين.

في هذه المقالة ، سنتعلم كيفية ضبط التركيز على عنصر بعد عرض تطبيق React أو مكون React.

في لغة HTML التقليدية ، كان من السهل تعيين عنصر للتركيز عليه باستخدام امتداد autofocus السمة داخل العلامة ، وهي سمة منطقية يتم تعيينها افتراضيًا على false. يوجه المتصفح للتركيز على حقل الإدخال المحدد ، ويمكن للمستخدم البدء في إدخال القيم على الفور:

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

سيعمل هذا أيضًا في تطبيقات React الخاصة بنا. ومع ذلك ، عندما نرغب في التركيز على عنصر ما بعد تقديمه بمزيد من التحكم البرمجي - يمكننا الاستفادة من useEffect() ربط في المكونات الوظيفية و componentDidMount() طريقة دورة الحياة في مكونات الفئة.

كيفية ضبط التركيز على العنصر بعد التقديم في المكونات الوظيفية

في السابق ، قبل إدخال خطافات React ، لم نتمكن من التعامل مع عمليات مثل هذه باستخدام المكونات الوظيفية.

منذ إدخال الخطافات ، يمكننا معرفة متى يتم عرض التطبيق / المكون بالكامل حتى نتمكن من تنفيذ إجراءات محددة باستخدام 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 ، أنشئ ملف ref وقم بتعيين قيمته على قيمة خالية بشكل افتراضي ثم قم بإرفاق ملف 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() الخطاف ثم استخدم الخطاف مع مجموعة تبعية فارغة ([]) للتأكد من أنه ينطلق فقط عند تركيب المكون في البداية. أخيرًا ، لجعل التركيز على العنصر المشار إليه ، سنصل إلى المرجع عبر 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() hook ، للتأكد من أن العنصر مضبوط على التركيز بمجرد أن يعرض التطبيق / المكون الخاص بنا:

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

وفي الختام

في هذه المقالة ، تعلمنا كيفية تعيين عنصر للتركيز باستخدام حقل إدخال بمجرد عرض التطبيق أو المكون الخاص بنا في كل من مكونات الفئة والوظيفة. كلتا الطريقتين متماثلتان ولكن لهما بناء جملة مختلف لأنهما نوعان مختلفان من المكونات.