Hướng Dẫn Dùng Event Lắng Nghe Sự Kiện Trong ReactJS - Event Management

Chào bạn, trong React, quản lý sự kiện là một trong những tính năng quan trọng trong một ứng dụng web. Nó cho phép người dùng tương tác với ứng dụng. React hỗ trợ tất cả các sự kiện có sẵn trong một ứng dụng web. Hãy tìm hiểu cách quản lý sự kiện trong ứng dụng React trong chương này.

Hãy xem quy trình từng bước để xử lý một sự kiện trong một thành phần React.

1. Định nghĩa một phương thức xử lý sự kiện để xử lý sự kiện đã cho:

handleClick() { 
  console.log("Sự kiện đã được kích hoạt"); 
}

React cung cấp cú pháp thay thế bằng cách sử dụng hàm lambda để định nghĩa xử lý sự kiện. Cú pháp lambda là:

handleClick = () => { 
  console.log("Sự kiện đã được kích hoạt"); 
}

Nếu bạn muốn biết đối tượng của sự kiện, hãy thêm đối số e trong phương thức xử lý. React sẽ gửi chi tiết đối tượng mục tiêu của sự kiện cho phương thức xử lý.

handleClick(e) { 
  console.log("Sự kiện đã được kích hoạt"); 
  console.log(e.target); 
}

Cú pháp lambda thay thế là:

handleClick = (e) => { 
  console.log("Sự kiện đã được kích hoạt"); 
  console.log(e.target); 
}

Nếu bạn muốn gửi thông tin bổ sung trong một sự kiện, hãy thêm thông tin bổ sung như đối số ban đầu và sau đó thêm đối số (e) cho đối tượng mục tiêu sự kiện.

handleClick(extra, e) { 
  console.log("Sự kiện đã được kích hoạt"); 
  console.log(e.target); 
  console.log(extra); 
  console.log(this); 
}

Cú pháp lambda thay thế là:

handleClick = (extra, e) => { 
  console.log("Sự kiện đã được kích hoạt"); 
  console.log(e.target); 
  console.log(extra); 
  console.log(this); 
}

2. Kết nối phương thức xử lý sự kiện trong hàm constructor của thành phần. Điều này sẽ đảm bảo tính sẵn có của this trong phương thức xử lý sự kiện.

constructor(props) { 
  super(props); 
  this.handleClick = this.handleClick.bind(this); 
}

Nếu phương thức xử lý sự kiện được định nghĩa bằng cú pháp lambda thay thế, thì không cần thiết phải kết nối. Từ khóa this sẽ được gắn tự động với phương thức xử lý sự kiện.

3. Đặt phương thức xử lý sự kiện cho sự kiện cụ thể như được chỉ định dưới đây :

<div onClick={this.handleClick}> ... </div>

Để thiết lập đối số bổ sung, kết nối phương thức xử lý sự kiện và sau đó chuyển thông tin bổ sung như đối số thứ hai.

<div onClick={this.handleClick.bind(this, extra)}> ... </div>

Cú pháp lambda thay thế là:

<div onClick={(e) => this.handleClick(extra, e)}> ... </div>

Hy vọng giải thích này giúp bạn hiểu cách quản lý sự kiện trong Ứng dụng React của mình.