12. Event trong React JS và cách dùng

Trong React JS, sự kiện (events) cho phép bạn xử lý các tương tác từ người dùng như nhấn nút, click chuột, nhập liệu, và nhiều hành động khác. Bạn có thể xử lý sự kiện bằng cách gắn các hàm xử lý sự kiện vào các phần tử trong giao diện của bạn.

Dưới đây là cách sử dụng và xử lý sự kiện trong React:

Bước 1: Định nghĩa hàm xử lý sự kiện

jsx

import React, { Component } from 'react';

class EventExample extends Component {
  handleClick = () => {
    console.log('Button clicked!');
  };

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

export default EventExample;

Bước 2: Gắn hàm xử lý sự kiện vào phần tử trong JSX

jsx

import React from 'react';
import EventExample from './EventExample';

function App() {
  return (
    <div>
      <EventExample />
    </div>
  );
}

export default App;

Trong ví dụ này:

• Chúng ta định nghĩa lớp EventExample kế thừa từ Component.
• Chúng ta định nghĩa một phương thức handleClick để xử lý sự kiện click chuột. Khi phương thức này được gọi, nó sẽ in ra dòng thông báo “Button clicked!”.
• Trong phần giao diện (render), chúng ta gắn hàm xử lý sự kiện handleClick vào phần tử <button> thông qua thuộc tính onClick.

Khi bạn nhấn vào nút “Click me”, phương thức xử lý sự kiện handleClick sẽ được gọi và thông báo “Button clicked!” sẽ được in ra trên console.

Các sự kiện có sẵn trong React tương tự như các sự kiện trong HTML và JavaScript. Ví dụ: onClick, onMouseOver, onChange, onSubmit,…

Trong phạm vi của hàm xử lý sự kiện, bạn có thể sử dụng this để tham chiếu đến thể hiện của lớp hoặc sử dụng cú pháp arrow function để đảm bảo rằng this có giá trị đúng. Đó là Event trong React JS và cách dùng.