การใช้งาน Hook useRef กับ DOM ใน React

ในบทเรียนก่อนหน้านี้เราเคยกล่าวว่า Refs มักถูกใช้สำหรับการเข้าถึงองค์ประกอบ DOM มากที่สุด

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

ลองดูตัวอย่างกับอินพุทกัน ว่ามันทำอย่างไร สร้างคอมโพเนนต์ที่มีอินพุทและปุ่ม:

return (
	<div>
		<input />
		<button>focus</button>
	</div>
);

เริ่มต้น นำเข้า useRef ไปยังคอมโพเนนต์:

import { useRef } from 'react';

และสร้าง Ref ในคอมโพเนนต์ กำหนดค่าเริ่มต้นเป็น null:

const ref = useRef(null);

เพิ่ม Handler สำหรับการคลิกที่ปุ่ม:

<button onClick={handleClick}>focus</button>

เพื่อให้สามารถเข้าถึงอินพุทได้ ให้เขียน Ref ของเราไปที่แอตทริบิวต์ ref ของอินพุท ดังนั้น เมื่อ React สร้าง DOM node สำหรับอินพุทนี้ มันจะวางลิงก์ไปที่มันไว้ใน ref.current และเราสามารถใช้เมธอดของอินพุทได้:

<input ref={ref} />

และสุดท้าย เพิ่มฟังก์ชันจัดการการคลิก เพื่อที่เมื่อคลิกปุ่ม อินพุทจะได้รับโฟกัส ตอนนี้เราสามารถทำสิ่งนี้ผ่าน Ref ซึ่งเก็บลิงก์ไปยังอินพุทของเรา โดยเรียกใช้เมธอด focus ของมัน:

function handleClick() {
	ref.current.focus();
}

ลองกดปุ่มและตรวจสอบดูว่าอินพุทได้รับโฟกัสจริง

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