כיצד להגדיר פוקוס על אלמנט לאחר רינדור עם React

מבוא

על ידי הגדרת הפוקוס על אלמנט, אנו מנחים בעדינות משתמש לשדה הקלט הצפוי הבא, ומעניקים לו חווית גלישה טובה יותר עם פחות ניחושים.

במאמר זה, נלמד כיצד להגדיר את הפוקוס על אלמנט לאחר עיבוד אפליקציית React או רכיב React.

ב-HTML מסורתי, היה קל להגדיר אלמנט להתמקד באמצעות ה- autofocus תכונה בתוך שלנו תג, שהוא מאפיין בוליאני ומוגדר כברירת מחדל ל false. הוא מורה לדפדפן להתמקד בשדה הקלט הספציפי הזה, והמשתמש יכול להתחיל להזין ערכים באופן מיידי:

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

זה הולך לעבוד גם ביישומי React שלנו. ובכל זאת, כאשר אנו רוצים להתמקד באלמנט לאחר רינדור עם שליטה פרוגרמטית יותר - אנו יכולים לעשות שימוש ב- useEffect() וו רכיבים פונקציונליים ואת componentDidMount() שיטת מחזור החיים ברכיבי הכיתה.

כיצד להגדיר פוקוס על אלמנט לאחר רינדור ברכיבים פונקציונליים

בעבר, לפני הצגת ה-React hooks, לא יכולנו להתמודד עם פעולות כאלה עם רכיבים פונקציונליים.

מאז הצגת הווים, אנו יכולים לדעת מתי האפליקציה/רכיב שלנו עבר רינדור מלא כדי שנוכל לבצע פעולות ספציפיות באמצעות 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 והגדר את הערך שלו ל-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() הוק ולאחר מכן עשה שימוש בהוק עם מערך תלות ריק ([]) כדי לוודא שהוא נדלק רק כאשר הרכיב נטען בתחילה. לבסוף, כדי להפוך את האלמנט אליו מתייחסים להתמקד, נגיע ל-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;

כיצד להגדיר פוקוס על אלמנט לאחר רינדור ברכיבי הכיתה

עד כה, ראינו כיצד להגדיר את הפוקוס על אלמנט עם רכיב פונקציונלי, אבל זה תחביר אחר לגמרי עם רכיבי מחלקה מכיוון שאנחנו כבר לא עושים שימוש ב-hooks כי הם עובדים רק ברכיבים פונקציונליים. ברכיבי הכיתה, אנו יוצרים את ה-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() hook, כדי להבטיח שהאלמנט מוגדר בפוקוס ברגע שהאפליקציה/רכיב שלנו יעבדו:

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

סיכום

במאמר זה, למדנו כיצד להגדיר אלמנט להתמקד באמצעות שדה קלט ברגע שהאפליקציה או הרכיב שלנו יוצגו ברכיבים Class ו- Functional. שתי השיטות זהות אך יש להן תחביר שונה מכיוון שהן שני סוגים שונים של רכיבים.