🌞

useRef với Trường Nhập Liệu trong React.js

Tác giả: Phi Long

Cập nhật lần cuối: 15/01/2025

🚀 Sử dụng useRef với Trường Nhập Liệu trong React.js

Khi làm việc với biểu mẫu (form) trong React.js, việc xử lý dữ liệu đầu vào của người dùng thường được thực hiện thông qua các component được kiểm soát (controlled components) sử dụng useState. Tuy nhiên, có những trường hợp bạn cần truy cập trực tiếp vào một phần tử DOM mà không cần re-render lại component. Đây là lúc hook useRef phát huy tác dụng.

🔍 useRef là gì?

useRef là một React Hook cung cấp cách để lưu trữ giá trị qua nhiều lần render mà không gây re-render. Nó thường được sử dụng để tham chiếu trực tiếp đến các phần tử DOM. 🎯

🤔 Tại sao sử dụng useRef với trường nhập liệu?

Khi sử dụng useRef với trường nhập liệu, bạn có thể:

🎯 Truy cập và thao tác trực tiếp với phần tử DOM.

🎯 Tự động focus vào ô nhập liệu bằng mã lệnh.

🎯 Lấy giá trị hiện tại của ô nhập liệu mà không làm re-render component.

📝 Ví dụ cơ bản: Truy cập trường nhập liệu

Dưới đây là một ví dụ đơn giản, trong đó useRef được sử dụng để focus vào ô nhập liệu khi nhấn nút:

import React, { useRef } from "react";

function InputFocusExample() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Nhập gì đó..." />
      <button onClick={handleFocus}>Focus vào ô nhập</button>
    </div>
  );
}

export default InputFocusExample;

📌 Giải thích

useRef(null) khởi tạo một tham chiếu với giá trị ban đầu là null.

Thuộc tính ref trong <input> được gán cho inputRef, liên kết nó với phần tử DOM.

Khi nút được nhấn, hàm handleFocus sẽ được gọi, và inputRef.current.focus() sẽ focus vào ô nhập liệu.

📢 Lấy giá trị của ô nhập mà không cần state

Thông thường, useState được sử dụng để lưu trữ giá trị của input. Tuy nhiên, useRef có thể được dùng để truy cập giá trị mà không cần re-render lại component:

import React, { useRef } from "react";

function InputValueExample() {
  const inputRef = useRef(null);

  const handleSubmit = () => {
    alert(`Giá trị nhập: ${inputRef.current.value}`);
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Nhập nội dung" />
      <button onClick={handleSubmit}>Lấy giá trị 🎯</button>
    </div>
  );
}

export default InputValueExample;

🧐 Giải thích

inputRef.current.value lấy giá trị hiện tại của ô nhập mà không cập nhật lại state của component.

Cách tiếp cận này hữu ích trong các form không yêu cầu re-render khi giá trị thay đổi.

🎉 Kết luận

Sử dụng useRef trong React.js giúp bạn truy cập trực tiếp vào trường nhập liệu, rất hữu ích trong các trường hợp cần kiểm soát việc re-render. Mặc dù useState thường được ưu tiên để quản lý dữ liệu form, nhưng useRef là một giải pháp mạnh mẽ khi bạn cần thao tác trực tiếp với DOM. 💡🚀

Bình luận(0)

Hãy là người đầu tiên bình luận!