Câu hỏi phỏng vấn React.js
Câu hỏi

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?

Câu trả lời

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...

middle

middle

Gợi ý câu hỏi phỏng vấn

senior

Tại sao các class method cần phải được bind với một class instance?

middle

Bạn thích hooks nào trong React? Hãy mô tả cách tạo một hooks bất kỳ.

middle

Làm thế nào để việc render của React hoạt động chính xác khi chúng ta gọi setState?

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào