Cách đặt tiêu điểm vào phần tử sau khi kết xuất bằng React

Giới thiệu

Bằng cách đặt trọng tâm vào một phần tử, chúng tôi sẽ nhẹ nhàng hướng dẫn người dùng đến trường đầu vào dự kiến ​​tiếp theo, mang lại cho họ trải nghiệm duyệt web tốt hơn với ít phỏng đoán hơn.

Trong bài viết này, chúng ta sẽ tìm hiểu cách đặt tiêu điểm vào một phần tử sau khi hiển thị ứng dụng React của chúng tôi hoặc một thành phần React.

Trong HTML truyền thống, thật dễ dàng để đặt một phần tử để lấy tiêu điểm bằng cách sử dụng autofocus thuộc tính trong của chúng tôi , là một thuộc tính boolean và được đặt theo mặc định là false. Nó hướng dẫn trình duyệt tập trung vào trường nhập cụ thể đó và người dùng có thể bắt đầu nhập các giá trị ngay lập tức:

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

Điều này cũng sẽ hoạt động trong các ứng dụng React của chúng tôi. Tuy nhiên, khi chúng tôi muốn tập trung vào một phần tử sau khi hiển thị với nhiều điều khiển có lập trình hơn - chúng tôi có thể sử dụng useEffect() móc vào các thành phần chức năng và componentDidMount() phương thức vòng đời trong các thành phần lớp.

Cách đặt Trọng tâm vào Phần tử Sau khi Hiển thị trong Các Thành phần Chức năng

Trước đây, trước khi có React hooks, chúng ta không thể xử lý các hoạt động như thế này với các thành phần Function.

Kể từ khi giới thiệu hook, chúng ta có thể biết khi nào ứng dụng / thành phần của chúng ta đã hiển thị đầy đủ để chúng ta có thể thực hiện các hành động cụ thể bằng cách sử dụng useEffect() cái móc. Chúng tôi cũng có quyền truy cập vào useRef() hook, mà chúng ta có thể sử dụng để tham chiếu trực tiếp đến một phần tử cụ thể.

Giả sử chúng ta có một biểu mẫu có hai trường và chúng ta muốn một trong các trường được đặt vào tiêu điểm sau khi thành phần hiển thị:

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;

Hãy bắt đầu bằng cách tham chiếu đến đầu vào bằng cách sử dụng useRef() Phản ứng móc. Để làm điều này, trước tiên chúng tôi sẽ nhập useRef() từ React, tạo một ref và đặt giá trị của nó thành null theo mặc định, sau đó đính kèm ref đến phần tử React của chúng tôi thông qua ref thuộc tính:

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;

Lưu ý: Lưu ý rằng chúng tôi chỉ đính kèm tham chiếu đã tạo vào một trong các phần tử đầu vào, đó là phần tử chúng tôi muốn đặt làm tiêu điểm.

Bây giờ chúng ta hãy tiến hành sử dụng useEffect() hook để thêm tiêu điểm vào phần tử sau khi hiển thị ứng dụng của chúng tôi:

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;

Trong đoạn mã trên, hãy lưu ý rằng chúng tôi đã nhập useEffect() hook và sau đó sử dụng hook với một mảng phụ thuộc trống ([]) để đảm bảo rằng nó chỉ kích hoạt khi thành phần được gắn kết ban đầu. Cuối cùng, để làm cho phần tử được tham chiếu trở thành tiêu điểm, chúng tôi sẽ truy cập vào tham chiếu thông qua current và sau đó đính kèm focus() phương pháp:

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

Tại thời điểm này, khi ứng dụng hoặc thành phần của chúng tôi hiển thị, phần tử được tham chiếu sẽ tự động được lấy tiêu điểm:

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;

Cách đặt Trọng tâm vào Phần tử sau khi Hiển thị trong Thành phần Lớp

Cho đến nay, chúng ta đã thấy cách đặt tiêu điểm vào một phần tử có thành phần chức năng, nhưng đó là một cú pháp hoàn toàn khác với các thành phần lớp vì chúng ta không còn sử dụng hook nữa vì chúng chỉ hoạt động trong các thành phần chức năng. Trong các thành phần lớp, chúng tôi tạo tham chiếu của mình trong constructor() phương pháp và sử dụng componentDidMount() phương pháp để đặt phần tử được tham chiếu thành tiêu điểm khi ứng dụng của chúng tôi hiển thị:

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;

Trong đoạn mã trên, chúng tôi đã sử dụng constructor() để tạo một tham chiếu, mà chúng tôi đã đính kèm vào phần tử đầu vào:

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

Sau đó chúng tôi sử dụng componentDidMount() phương pháp vòng đời, rất giống với useEffect() hook, để đảm bảo rằng phần tử được đặt vào tiêu điểm khi ứng dụng / thành phần của chúng tôi hiển thị:

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

Kết luận

Trong bài viết này, chúng ta đã học cách đặt một phần tử để lấy tiêu điểm bằng cách sử dụng trường đầu vào khi ứng dụng hoặc thành phần của chúng ta hiển thị trong cả thành phần Lớp và Hàm. Cả hai phương thức đều giống nhau nhưng có cú pháp khác nhau vì chúng là hai loại thành phần khác nhau.