REACTJS CĂN BẢN
REACTJS NÂNG CAO
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Tìm hiểu về Refs trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về refs trong ReactJS. Trong quá trình làm việc với React ở một vài trường hợp nào đó bạn cần phải thực hiện việc tham chiếu đến DOM, mặc dù điều này không được khuyến khích sử dụng. Để giúp quá trình tham chiếu đến DOM dễ dàng hơn, React cung cấp cho chúng ta React Refs.

1. React Refs là gì?

React refs là một tính năng hữu ích, nó là cách mà chúng ta có thể để tham chiếu một element trong DOM hoặc từ một class component con đến component cha. Điều này cho phép chúng ta đọc và chỉnh sửa các element đó.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Cách giải thích dễ hiểu nhất về React Refs là tưởng tượng nó là một cây cầu. Khi một element được gán vào một ref nó sẽ cho phép chúng ta sửa đổi cũng như truy cập vào element đó ngay lập tức và không cần sử dụng đến props hay state để component re-render lại. Nó giống cho phép việc can thiệp vào DOM như trong Javascript DOM:

document.getElementsByTagName('h1').innerHTML = 'Freetuts.net'

Chúng ta có thể can thiệp trực tiếp vào DOM qua refs mà không cần thông qua việc render. Mặc dù đây là cách để can thiệp vào DOM thuận tiện mà không cần phải sử dụng đến state, props nhưng điều này React không khuyến khích. Bởi khi các DOM bị thay đổi thì nó sẽ ảnh hưởng một phần nào đó đến quá trình render các component. Các bạn nên sử dụng React refs để can thiệp vào DOM trong trường hợp cần thiết.

2. Sử dụng React Refs

Trong phần này chúng ta sẽ cùng nhau đi tìm hiểu về cách làm việc với React Refs trong React

Khởi tạo một Ref

Refs thường được chỉ định trong hàm tạo trong constructor ở class component và như một biến ở functional component. Sau đó được gắn vào một element trong hàm render(). Ở đây chúng ta sẽ tạo một refs và gắn vào element input :

import React from "react";


export default class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    //Khởi tạo một ref
    this.myRef = React.createRef();
  }

  render() {
    return (
      <input
        name="email"
        onChange={this.onChange}
        ref={this.myRef}
        type="text"
      />
    );
  }
}

Ở ví dụ bên trên mình đã khởi tạo một ref bằng cách sử dụng hàm React.createRef() và gán giá trị của nó vào thuộc tính myRef trong class MyComponent. Lúc này, chúng ta chỉ cần gán refs vào element input. Khi một ref được gắn vào một element, element đó có thể được truy cập và sửa đổi thông qua ref. Cụ thể trong trường hợp này là input

Tiếp theo, mình sẽ thêm một button cho ví dụ bên trên, khi click vào button đó nó sẽ tham chiếu đến input qua refs và thực hiện focus input đó.

...
handleClick = () => {
   //thuộc tính current trong refs cho phép
   //chúng ta chỉ định element hiện tại được tham chiếu.
   this.myRef.current.focus();
}
render() {
   return (
     ...
     
     <button onClick={this.handleClick}>
        Focus Input
     </button>
    </>
   )
}

Thuộc tính current trong myRefs chứa giá trị element được tham chiếu khi element đó được render. Bằng cách sử dụng React ref chúng ta sẽ thay đổi trạng thái của input mà không cần phải sử dụng đến state hay props. Trong trường hợp, bạn chỉ muốn focus một input hay làm mờ hình ảnh thì bạn chỉ cần sử dụng refs mà không cần phải re-render lại component để chỉ làm những việc này.

Cuối cùng, chúng ta sẽ có ví dụ đầy đủ:

import React from "react";


export default class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  handleClick = () => {
    this.myRef.current.focus();
  }
  render() {
    return (
      <>
      <code>freetuts.net</code>
      <input
        name="email"
        onChange={this.onChange}
        ref={this.myRef}
        type="text"
      />
      <button onClick={this.handleClick}>
        Focus Input
      </button>
      </>
    );
  }
}

react refs trong react js gif

Forwarding Refs

Forwarding Refs là một kỹ thuật để tự động chuyển một ref từ một component tới component con, cho phép component cha có thể tham chiếu tới các element của component con để đọc và chỉnh sửa nó.

React cung cấp cho chúng ta một cách thức để thực hiện việc chuyển tiếp một ref, chúng ta sẽ bao component con trong React.forwardRef(), ở đây mình có ví dụ:

//Component Con
const MyInput = React.forwardRef((props, ref) => {
   return(<input name={props.name} ref={ref} />);
});
// Component Cha
const MyComponent = () => {
   let ref = React.createRef();
   return (
     <MyInput
       name="email" 
       ref={ref}
     />
   );
}

Ví dụ bên trên mình đã sử dụng React.forwardRef(), ở đây nó cung cấp cho chúng ta 2 tham số lần lượt là propsrefs, cho chúng ta nhận về giá trị của propsrefs từ component cha.

Chúng ta có thể sử dụng React.forwardRef() trong class component bằng cách này sử dụng HOC (higher order component)

// Lấy ref thông qua props
class WrappedComponent extends Component {
  render() {
    return (
      <input 
        type="text" 
        name={this.props.name}
        ref={this.props.innerRef}
       />
    )
  }
}
// Gói componentnt được bọc của chúng tôi với ForwardRef, truyền vào props giá trị của refs
const MyInput = React.forwardRef((props, ref) => {
  return (<WrappedComponent innerRef={ref} {...props} />);
});
export default MyInput;

Và cuối cùng chúng ta sẽ làm ví dụ có chức năng giống ví dụ ban đầu nhưng chúng ta sẽ tham chiếu đến element input trong component con.

import React from "react";

//Component Con
const MyInput = React.forwardRef((props, ref) => {
  return <input name={props.name} ref={ref} />;
});
// Component Cha
const MyComponent = () => {
  let ref = React.createRef();
  const handleButton = () => {
    ref.current.focus();
  };
  return (
    <>
      <code>freetuts.net</code>
      <MyInput name="email" ref={ref} />
      <button onClick={handleButton}>Focus Input</button>
    </>
  );
};
export default MyComponent;

Kết quả cũng tương tự như ví dụ ban đầu.

Trên đây chúng ta đã cùng nhau đi tìm hiểu về Refs trong ReactJS. Đây là kiến thức rất cơ bản về nó nhưng cũng hết sức quan trọng trong quá trình làm việc với ReactJS sau này. Mong rằng bài viết sẽ giúp ích cho bạn.

Cùng chuyên mục:

Xây dựng Hook trong React JS (React Custom Hook)

Xây dựng Hook trong React JS (React Custom Hook)

React Hooks là một tính năng mới trong React 16.8. Cho phép sử dụng state…

Tạo ứng dụng ghi chú với ReactJS và Redux

Tạo ứng dụng ghi chú với ReactJS và Redux

Trong bài viết này mình sẽ hướng dẫn xây dựng một ứng dụng ghi chú…

Cách đẩy ứng dụng ReactJS lên Heroku và Deploy trên đó

Cách đẩy ứng dụng ReactJS lên Heroku và Deploy trên đó

Cho bạn nào chưa bíết thì Heroku mà môt nền tảng đám mây hỗ trợ…

Tích hợp Redux vào ReactJS

Tích hợp Redux vào ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về cách tích…

Tạo máy tính đơn giản bằng ReactJS

Tạo máy tính đơn giản bằng ReactJS

Trong bài này ta sẽ xây dựng một ứng dụng máy tính đơn giản bằng…

Redux là gì? Tại sao lại ứng dụng trong ReactJS

Redux là gì? Tại sao lại ứng dụng trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về Redux trong…

useContext trong React Hook

useContext trong React Hook

Trong bài viết này chúng ta sẽ cùnuseContextg nhau đi tìm hiểu về useContext trong…

React Router cơ bản

React Router cơ bản

Có thể khẳng định rằng những trang SPA (single page application) hiện đang rất phổ…

useEffect trong React Hooks

useEffect trong React Hooks

Trong bài viết này chúng ta sẽ đi tìm hiểu về useEffect trong React Hooks.…

Tìm hiểu React Hook useState

Tìm hiểu React Hook useState

React Hooks bao gồm rất 10 hooks khác nhau, trong phạm vi bài viết này…

Giới thiệu Hooks trong React JS

Giới thiệu Hooks trong React JS

Higher-Order Components trong ReactJS

Higher-Order Components trong ReactJS

Tìm hiểu về Fragments trong ReactJS

Tìm hiểu về Fragments trong ReactJS

Tìm hiểu về Render Props trong ReactJS

Tìm hiểu về Render Props trong ReactJS

Tìm hiểu về Context trong ReactJS

Tìm hiểu về Context trong ReactJS

Kỹ thuật Lifting State Up trong ReactJS

Kỹ thuật Lifting State Up trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về kỹ thuật…

Tìm hiểu về List và Keys trong ReactJS

Tìm hiểu về List và Keys trong ReactJS

Trong bài viết này chúng ta sẽ cùng hau đi tìm hiểu về lists và…

Render với điều kiện trong ReactJS

Render với điều kiện trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về cách để…

Handling Events (xử lý sự kiện) trong ReactJS

Handling Events (xử lý sự kiện) trong ReactJS

Xử lý Form trong ReactJS

Xử lý Form trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về các thao…

Top