React ile Oluşturulduktan Sonra Öğeye Odaklanma Nasıl Ayarlanır

Giriş

Odağı bir öğeye ayarlayarak, kullanıcıyı bir sonraki beklenen giriş alanına nazikçe yönlendirir ve onlara daha az tahminle daha iyi bir gezinme deneyimi sunarız.

Bu yazıda React uygulamamızı veya bir React bileşenini render ettikten sonra bir elemente nasıl odaklanacağımızı öğreneceğiz.

Geleneksel HTML'de, bir öğeyi odaklanacak şekilde ayarlamak kolaydı. autofocus içimizdeki nitelik Boole özelliği olan ve varsayılan olarak şu şekilde ayarlanan etiket: false. Tarayıcıya belirli bir giriş alanına odaklanması talimatını verir ve kullanıcı hemen değerleri girmeye başlayabilir:

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

Bu, React uygulamalarımızda da işe yarayacak. Yine de, renderleme sonrasında daha programlı kontrolle bir öğeye odaklanmak istediğimizde, useEffect() fonksiyonel bileşenleri takın ve componentDidMount() Sınıf bileşenlerinde yaşam döngüsü yöntemi.

İşlevsel Bileşenlerde Oluşturma Sonrası Öğeye Odaklanma Nasıl Ayarlanır

Daha önce, React kancalarının piyasaya sürülmesinden önce, bu gibi işlemleri Fonksiyonel bileşenlerle halledemiyorduk.

Kancaların kullanıma sunulmasından bu yana, uygulamamızın/bileşenimizin ne zaman tam olarak oluşturulduğunu bilebiliriz, böylece belirli eylemleri gerçekleştirebiliriz. useEffect() kanca. Ayrıca şunlara da erişimimiz var: useRef() belirli bir öğeye doğrudan referans vermek için kullanabileceğimiz kanca.

İki alanlı bir formumuz olduğunu ve bileşen oluşturulduktan sonra alanlardan birinin odağa ayarlanmasını istediğimizi varsayalım:

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;

kullanarak girişe bir referans alarak başlayalım. useRef() Kancaya tepki ver. Bunu yapmak için önce içe aktarırız useRef() React'tan bir ref ve değerini varsayılan olarak null olarak ayarlayın ve ardından oluşturulan dosyayı ekleyin ref aracılığıyla React öğemize ref özellik:

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;

Not: Oluşturulan referansı yalnızca odaklanmak istediğimiz girdi öğelerinden birine eklediğimize dikkat edin.

Şimdi kullanmaya devam edelim useEffect() Uygulamamızı oluşturduktan sonra öğeye odak eklemek için kancayı kullanın:

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;

Yukarıdaki kodda, içe aktardığımıza dikkat edin. useEffect() kancayı kullandım ve ardından boş bir bağımlılık dizisiyle kancayı kullandım ([]) yalnızca bileşen ilk kez takıldığında etkinleştiğinden emin olmak için. Son olarak, başvurulan öğenin odaklanmasını sağlamak için başvuruya şu adresten erişeceğiz: current özniteliği ve ardından şunu ekleyin: focus() yöntem:

useEffect(() => {
    inputReference.current.focus();
}, [])

Bu noktada uygulamamız veya bileşenimiz görüntülendiğinde referans verilen öğeye otomatik olarak odaklanılacaktır:

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;

Sınıf Bileşenlerinde Oluşturduktan Sonra Öğeye Odaklanma Nasıl Ayarlanır

Şu ana kadar, işlevsel bileşeni olan bir öğeye nasıl odaklanacağımızı gördük, ancak artık kancaları kullanmadığımız için sınıf bileşenleriyle ilgili tamamen farklı bir söz dizimi var çünkü bunlar yalnızca işlevsel bileşenlerde çalışıyor. Sınıf bileşenlerinde referansımızı oluştururuz. constructor() yöntemini kullanın ve componentDidMount() Başvurulan öğeyi uygulamamız oluşturulduktan sonra odaklanacak şekilde ayarlama yöntemi:

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;

Yukarıdaki kodda şunu kullandık: constructor() giriş öğesine eklediğimiz bir referans oluşturma yöntemi:

constructor(props) {
    super(props);
    this.inputReference = React.createRef();
}

daha sonra kullandık componentDidMount() yaşam döngüsü yöntemine çok benzer useEffect() kanca, uygulamamız/bileşenimiz oluşturulduktan sonra öğenin odağa ayarlandığından emin olmak için:

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

Sonuç

Bu makalede, uygulamamız veya bileşenimiz hem Sınıf hem de Fonksiyonel bileşenlerde görüntülendiğinde, bir giriş alanını kullanarak bir öğeyi odaklanacak şekilde nasıl ayarlayacağımızı öğrendik. Her iki yöntem de aynıdır ancak iki farklı bileşen türü olduklarından farklı sözdizimlerine sahiptirler.