Học cách xử lý sự kiện trong ReactJS

Trong bài viết trước chúng ta đã tìm hiểu về Component trong ReactJS và nắm được những điều cơ bản về Class Component cũng như Functional Component. Hôm nay chúng ta sẽ tìm hiểu thêm về Handling Events trong ReactJS – xử lý sự kiện trong ReactJS. Trước đó hãy đảm bảo rằng bạn đã cài đặt môi trường phát triển và nắm vững được các cú pháp cơ bản về ReactJS.

 1. Xử lý sự kiện trong ReactJS

Việc xử lý sự kiện trong React sẽ rất dễ tiếp cận vì nó rất giống với việc bạn xử lý sự kiện trên các phần tử DOM. Tên của các sự kiện trong ReactJS thường được đặt bằng camelCase khác với DOM thông thường.

Để nhìn thấy hiểu rõ hơn thì chúng ta cùng đến với ví dụ về việc xử lý sự kiện trong ReactJS và trong DOM thông thường.

Ví dụ: onclick -> onClick, onchange -> onChange, …

Khi bắt sự kiện trong React chúng ta cần truyền một hàm thay vì một chuỗi như HTML thông thường. 

Ví dụ: 

// React:
<button onClick={this.handleClick}>
	Click me
</button>

// DOM thông thường:
<button onclick="handleClick()">
	Click me
</button>

 

Sự khác biệt còn đến từ việc trong React bạn thường cần bind hàm xử lý sự kiện để đảm bảo rằng this trỏ đến đúng component còn trong DOM thì không yêu cầu binding hàm xử lý. 

Việc sử dụng camelCase và binding hàm trong React là thực tiễn phổ biến để đảm bảo tính nhất quán và quản lý dễ dàng.

2. Sự Kiện Synthetic Event

Xử lý sự kiện trong React không chỉ giống như trong DOM thông thường mà còn được bổ sung bởi các đặc điểm độc đáo của React. React sử dụng các sự kiện tổng hợp (Synthetic Event) để đảm bảo tính nhất quán giữa các trình duyệt và tối ưu hiệu suất. Mặc dù React vẫn hỗ trợ việc sử dụng preventDefault và stopPropagation, nhưng bạn có thể gọi chúng trực tiếp trên đối tượng Synthetic Event.

Ví dụ:

class MyComponent extends React.Component {
  handleClick(event) {
    // Hủy bỏ sự kiện mặc định
    event.preventDefault();

    // Ngăn chặn sự kiện lan truyền
    event.stopPropagation();

    // Xử lý sự kiện của bạn tại đây
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

3. Tính bất đồng bộ trong xử lý sự kiện ReactJS

Trong React, xử lý sự kiện có thể là bất đồng bộ. React sẽ tổ chức các sự kiện vào hàng đợi và xử lý chúng sau khi kết thúc hàm gọi sự kiện chính. Điều này giúp tối ưu hiệu suất và giảm độ trễ.

Ví dụ:

import React, { useState } from 'react';

const AsyncEventExample = () => {
  const [message, setMessage] = useState('');

  const handleClick = () => {
    // Bắt đầu một công việc bất đồng bộ (ví dụ: gọi API)
    fetchData()
      .then(response => {
        // Xử lý kết quả khi công việc bất đồng bộ hoàn thành
        setMessage(`Data loaded successfully: ${response}`);
      })
      .catch(error => {
        // Xử lý lỗi nếu có
        setMessage(`Error loading data: ${error.message}`);
      });

    // Mã chính tiếp tục thực hiện mà không chờ công việc bất đồng bộ kết thúc
    console.log('Click event processed');
  };

  const fetchData = () => {
    // Giả định hàm này gọi một API và trả về một Promise
    return new Promise((resolve, reject) => {
      // Giả định một số công việc bất đồng bộ, chẳng hạn như gọi API
      setTimeout(() => {
        const success = Math.random() > 0.5;
        if (success) {
          resolve('Mock data');
        } else {
          reject(new Error('Failed to fetch data'));
        }
      }, 1000);
    });
  };

  return (
    <div>
      <button onClick={handleClick}>Load Data</button>
      <p>{message}</p>
    </div>
  );
};

export default AsyncEventExample;

Trong ví dụ trên, khi click vào nút “Load Data”, hàm `handleClick` bắt đầu một công việc bất đồng bộ (ví dụ: gọi API thông qua hàm fetchData). Trong khi công việc này đang diễn ra, mã chính tiếp tục thực hiện mà không cần chờ đợi công việc bất đồng bộ kết thúc. Khi công việc bất đồng bộ đã hoàn thành, kết quả sẽ được xử lý và cập nhật trạng thái của component. Việc này sẽ giúp ứng dụng vẫn có thể phản hồi và tiếp tục thực hiện các nhiệm vụ khác mà không bị chặn lại bởi các tác vụ bất đồng bộ.

Tổng kết

Xử lý sự kiện trong ReactJS là một khía cạnh quan trọng của việc phát triển ứng dụng. Bằng cách sử dụng thành thục các khái niệm trên, bạn có thể tạo ra các giao diện người dùng tương tác và linh hoạt. Hãy thực hành và tìm hiểu thêm để nắm vững cách xử lý sự kiện trong ứng dụng React của bạn. Bạn có thể tìm hiểu thêm về React thông qua các bài viết bên dưới để có thể bổ sung nhiều kiến thức hơn cho bản thân.

>>>Xem thêm các bài viết liên quan đến ReactJS 

Bài 6: Router trong ReactJS là gì? Cách sử dụng Router trong ReactJS

Bài 7: Sử dụng Hook để giao tiếp với API trong ReactJS

---

Cộng Đồng Linux là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 – 3 năm.

Bộ API giao tiếp của hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy, Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký bài viết mới: