Làm cách nào để liên kết các phương thức hoặc event handler trong lệnh callback JSX?

Trong React, việc liên kết các phương thức hoặc event handler trong lệnh callback JSX là quan trọng để đảm bảo rằng this trong phương thức đó tham chiếu đúng đến instance của component. Dưới đây là một số cách để liên kết các phương thức hoặc event handler:

1. Sử dụng Arrow Functions trong JSX

Arrow functions không có context this riêng, nên khi bạn sử dụng chúng trong JSX, this sẽ tham chiếu đến context bên ngoài - thường là instance của component. Điều này giúp tránh việc phải liên kết this một cách rõ ràng.

class MyComponent extends React.Component {
  myMethod() {
    console.log(this); // Tham chiếu đúng đến instance của MyComponent
  }

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

2. Sử dụng .bind() trong JSX

Bạn có thể sử dụng phương thức .bind() để rõ ràng liên kết this với phương thức hoặc event handler khi truyền nó vào JSX. Tuy nhiên, cách này có thể gây ra việc tạo ra một hàm mới mỗi lần component render, ảnh hưởng đến hiệu suất.

class MyComponent extends React.Component {
  myMethod() {
    console.log(this); // Tham chiếu đúng đến instance của MyComponent
  }

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

3. Liên kết tro...