Sử dụng hook useRef cho DOM trong React

Trong một bài học trước, chúng ta đã đề cập rằng ref thường được sử dụng nhất để truy cập vào các phần tử DOM.

Ref sẽ là cứu cánh khi bạn, ví dụ, cần tập trung vào một phần tử, thực hiện cuộn hoặc tính toán kích thước và vị trí của nó, hoặc có thể sử dụng một số phương thức hoặc thuộc tính của nó, bởi vì trong React không có các phương thức tích hợp sẵn cho những việc như vậy.

Hãy xem ví dụ với input để xem cách thực hiện. Hãy tạo một component với input và một nút:

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

Đầu tiên, hãy import useRef vào component:

import { useRef } from 'react';

Và tạo một ref ref trong component. Khởi tạo nó với giá trị null:

const ref = useRef(null);

Thêm trình xử lý sự kiện click vào nút:

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

Để có quyền truy cập vào input, hãy gán ref ref của chúng ta vào thuộc tính ref của input. Bằng cách này, khi React tạo DOM node cho input này, nó sẽ đặt tham chiếu đến nó vào ref.current và chúng ta có thể sử dụng các phương thức của input:

<input ref={ref} />

Và cuối cùng, hãy thêm hàm xử lý sự kiện click để khi nhấp vào nút, input sẽ được focus. Bây giờ chúng ta có thể thực hiện điều này thông qua ref, trong đó chứa tham chiếu đến input của chúng ta, bằng cách gọi phương thức focus của nó:

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

Hãy nhấn nút và đảm bảo rằng input được focus.

Lấy mã component App mà chúng ta đã viết trong bài học này và làm sao để khi nhấp vào nút, ngoài việc focus vào input, còn xóa sạch trường nhập liệu. Sử dụng thuộc tính value của input để làm điều này.