Πώς να ρυθμίσετε την εστίαση στο στοιχείο μετά την απόδοση με το React

Εισαγωγή

Ρυθμίζοντας την εστίαση σε ένα στοιχείο, καθοδηγούμε απαλά έναν χρήστη στο επόμενο αναμενόμενο πεδίο εισαγωγής, δίνοντάς του μια καλύτερη εμπειρία περιήγησης με λιγότερες εικασίες.

Σε αυτό το άρθρο, θα μάθουμε πώς να ρυθμίζουμε την εστίαση σε ένα στοιχείο μετά την απόδοση της εφαρμογής React ή ενός στοιχείου React.

Στην παραδοσιακή HTML, ήταν εύκολο να ορίσετε ένα στοιχείο για εστίαση χρησιμοποιώντας το autofocus χαρακτηριστικό μέσα μας ετικέτα, το οποίο είναι ένα boolean χαρακτηριστικό και έχει οριστεί από προεπιλογή σε false. Δίνει οδηγίες στο πρόγραμμα περιήγησης να εστιάσει σε αυτό το συγκεκριμένο πεδίο εισαγωγής και ο χρήστης μπορεί να αρχίσει να εισάγει τιμές αμέσως:

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

Αυτό θα λειτουργήσει και στις εφαρμογές μας React. Ωστόσο, όταν θέλουμε να εστιάσουμε σε ένα στοιχείο μετά την απόδοση με περισσότερο προγραμματικό έλεγχο – μπορούμε να χρησιμοποιήσουμε το useEffect() γάντζο σε λειτουργικά εξαρτήματα και το componentDidMount() μέθοδος κύκλου ζωής σε στοιχεία κλάσης.

Πώς να ρυθμίσετε την εστίαση σε στοιχείο μετά την απόδοση σε λειτουργικά στοιχεία

Προηγουμένως, πριν από την εισαγωγή των αγκιστριών React, δεν μπορούσαμε να χειριστούμε λειτουργίες όπως αυτή με τα λειτουργικά στοιχεία.

Από την εισαγωγή των αγκίστρων, μπορούμε να γνωρίζουμε πότε η εφαρμογή/το στοιχείο μας έχει αποδοθεί πλήρως, ώστε να μπορούμε να εκτελέσουμε συγκεκριμένες ενέργειες χρησιμοποιώντας το useEffect() άγκιστρο. Έχουμε επίσης πρόσβαση στο useRef() άγκιστρο, το οποίο μπορούμε να χρησιμοποιήσουμε για να αναφερθούμε απευθείας σε ένα συγκεκριμένο στοιχείο.

Ας υποθέσουμε ότι έχουμε μια φόρμα με δύο πεδία και θέλουμε ένα από τα πεδία να εστιάζει μετά την απόδοση του στοιχείου:

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() React hook. Για να γίνει αυτό, θα πρέπει πρώτα να εισάγουμε 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() αγκίστρωσε και μετά έκανε χρήση του γάντζου με έναν κενό πίνακα εξάρτησης ([]) για να βεβαιωθείτε ότι ενεργοποιείται μόνο όταν το εξάρτημα τοποθετηθεί αρχικά. Τέλος, για να εστιάσουμε το αναφερόμενο στοιχείο, θα έχουμε πρόσβαση στην αναφορά μέσω του 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();
}

Συμπέρασμα

Σε αυτό το άρθρο, μάθαμε πώς να ρυθμίζουμε ένα στοιχείο ώστε να εστιάζει χρησιμοποιώντας ένα πεδίο εισαγωγής μόλις αποδοθεί η εφαρμογή ή το στοιχείο μας και στα στοιχεία Class και Functional. Και οι δύο μέθοδοι είναι ίδιες, αλλά έχουν διαφορετική σύνταξη, καθώς είναι δύο διαφορετικοί τύποι στοιχείων.