Mô tả cách xử lý các event trong React?

Trong React, việc xử lý các sự kiện (events) được thực hiện thông qua cơ chế tương tự như xử lý sự kiện trong HTML thuần túy, nhưng có một số khác biệt quan trọng và cải tiến nhất định. Dưới đây là cách xử lý các sự kiện trong React:

Đặt tên sự kiện

Trong React, tên của các sự kiện được viết theo cú pháp camelCase thay vì lowercase như trong HTML thuần túy. Ví dụ, thay vì sử dụng "onclick" trong HTML, bạn sẽ sử dụng "onClick" trong JSX của React.

Truyền hàm làm trình xử lý sự kiện

Trong React, bạn truyền một hàm vào thuộc tính của sự kiện để xử lý sự kiện đó. Hàm này có thể được định nghĩa trực tiếp trong JSX hoặc được tham chiếu từ một phương thức của class component.

Ví dụ với Function Component

function MyComponent() {
  function handleClick() {
    console.log('Button clicked');
  }

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

Ví dụ với Class Component

class MyComponent extends React.Component {
  handleClick() {
    console.log('Button clicked');
  }

  render() {
    return (
      <button onClick={this.handleClick.bind(this)}>
        Click ...