วิธีตั้งค่าโฟกัสที่องค์ประกอบหลังจากแสดงผลด้วย 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 เราไม่สามารถจัดการการทำงานแบบนี้ด้วย Functional Components ได้

นับตั้งแต่เปิดตัว 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 สร้าง a ref และตั้งค่าเป็น null ตามค่าเริ่มต้น จากนั้นแนบไฟล์ created ref ไปยังองค์ประกอบ React ของเราผ่าน the 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() hook แล้วใช้ hook กับอาร์เรย์การพึ่งพาที่ว่างเปล่า ([]) เพื่อให้แน่ใจว่าจะยิงเฉพาะเมื่อส่วนประกอบติดตั้งในครั้งแรกเท่านั้น สุดท้าย เพื่อให้องค์ประกอบที่อ้างอิงโฟกัส เราจะเข้าถึงผู้อ้างอิงผ่านทาง 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;

วิธีตั้งค่าโฟกัสที่องค์ประกอบหลังจากแสดงผลในคอมโพเนนต์ของคลาส

จนถึงตอนนี้ เราได้เห็นวิธีตั้งค่าโฟกัสที่องค์ประกอบด้วยองค์ประกอบที่ใช้งานได้แล้ว แต่มันเป็นไวยากรณ์ที่แตกต่างอย่างสิ้นเชิงกับองค์ประกอบของคลาส เนื่องจากเราไม่ได้ใช้ hook อีกต่อไปเพราะพวกมันทำงานในส่วนประกอบที่ใช้งานได้เท่านั้น ในองค์ประกอบของคลาส เราสร้างการอ้างอิงของเราภายใน 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;

ในโค้ดด้านบน เราใช้ the constructor() วิธีสร้างข้อมูลอ้างอิงซึ่งเราแนบมากับองค์ประกอบอินพุต:

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

จากนั้นเราก็ใช้ componentDidMount() วิธีวงจรชีวิตซึ่งคล้ายกับ .มาก useEffect() ขอให้แน่ใจว่าองค์ประกอบถูกตั้งค่าโฟกัสเมื่อแอปพลิเคชัน / ส่วนประกอบของเราแสดงผล:

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

สรุป

ในบทความนี้ เราได้เรียนรู้วิธีตั้งค่าองค์ประกอบให้โฟกัสโดยใช้ช่องป้อนข้อมูลเมื่อแอปพลิเคชันหรือส่วนประกอบของเราแสดงผลทั้งในคลาสและองค์ประกอบการทำงาน ทั้งสองวิธีเหมือนกัน แต่มีไวยากรณ์ต่างกันเนื่องจากเป็นส่วนประกอบสองประเภทที่แตกต่างกัน