Cara Mengatur Fokus Pada Elemen Setelah Rendering Dengan React

Pengantar

Dengan menyetel fokus pada suatu elemen, kami dengan lembut memandu pengguna ke bidang input berikutnya yang diharapkan, memberi mereka pengalaman menjelajah yang lebih baik dengan lebih sedikit tebakan.

Dalam artikel ini, kita akan belajar bagaimana mengatur fokus pada sebuah elemen setelah merender aplikasi React atau komponen React kita.

Dalam HTML tradisional, mudah untuk mengatur elemen untuk fokus menggunakan autofocus atribut dalam kami tag, yang merupakan atribut boolean dan secara default disetel ke false. Ini menginstruksikan browser untuk fokus pada bidang input tertentu, dan pengguna dapat segera mulai memasukkan nilai:

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

Ini akan bekerja di aplikasi React kami juga. Namun, ketika kita ingin menetapkan fokus pada elemen setelah rendering dengan lebih banyak kontrol terprogram – kita dapat menggunakan useEffect() menghubungkan komponen fungsional dan componentDidMount() metode siklus hidup dalam komponen kelas.

Cara Mengatur Fokus Pada Elemen Setelah Rendering di Komponen Fungsional

Sebelumnya, sebelum pengenalan kait React, kami tidak dapat menangani operasi seperti ini dengan komponen Fungsional.

Sejak pengenalan hook, kita dapat mengetahui kapan aplikasi/komponen kita telah sepenuhnya dirender sehingga kita dapat melakukan tindakan tertentu menggunakan useEffect() kait. Kami juga memiliki akses ke useRef() hook, yang dapat kita gunakan untuk mereferensikan elemen tertentu secara langsung.

Misalkan kita memiliki formulir dengan dua bidang, dan kita ingin salah satu bidang disetel pada fokus setelah komponen dirender:

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;

Mari kita mulai dengan mendapatkan referensi ke input menggunakan useRef() Bereaksi kait. Untuk melakukan ini, pertama-tama kita akan mengimpor useRef() dari React, buat a ref dan atur nilainya ke nol secara default lalu lampirkan yang dibuat ref ke elemen Bereaksi kami melalui ref atribut:

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;

Catatan: Perhatikan bahwa kita hanya melampirkan referensi yang dibuat ke salah satu elemen input, yang merupakan elemen yang ingin kita atur untuk fokus.

Sekarang mari kita lanjutkan untuk menggunakan useEffect() kait untuk menambahkan fokus ke elemen setelah merender aplikasi kita:

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;

Pada kode di atas, perhatikan bahwa kami mengimpor useEffect() hook dan kemudian memanfaatkan hook dengan array dependensi kosong ([]) untuk memastikannya hanya menyala saat komponen pertama kali dipasang. Terakhir, untuk membuat elemen yang direferensikan menjadi fokus, kita akan mengakses referensi melalui current atribut dan kemudian lampirkan focus() Metode:

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

Pada titik ini, ketika aplikasi atau komponen kita dirender, elemen yang direferensikan akan secara otomatis difokuskan:

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;

Cara Mengatur Fokus Pada Elemen Setelah Rendering di Komponen Kelas

Sejauh ini, kita telah melihat cara mengatur fokus pada elemen dengan komponen fungsional, tetapi sintaksnya sama sekali berbeda dengan komponen kelas karena kita tidak lagi menggunakan kait karena hanya berfungsi di komponen fungsional. Di komponen kelas, kami membuat referensi kami di dalam constructor() metode dan memanfaatkan componentDidMount() metode untuk mengatur elemen yang direferensikan agar fokus setelah aplikasi kita merender:

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;

Dalam kode di atas, kami menggunakan constructor() metode untuk membuat referensi, yang kami lampirkan ke elemen input:

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

Kami kemudian menggunakan componentDidMount() metode siklus hidup, yang sangat mirip dengan useEffect() hook, untuk memastikan bahwa elemen disetel pada fokus setelah aplikasi/komponen kita merender:

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

Kesimpulan

Dalam artikel ini, kita telah mempelajari cara mengatur elemen untuk fokus menggunakan bidang input setelah aplikasi atau komponen kita dirender di komponen Kelas dan Fungsional. Kedua metode tersebut sama tetapi memiliki sintaks yang berbeda karena merupakan dua jenis komponen yang berbeda.