Truyền Method References giữa các Component

1. Làm cách nào để truyền một trình xử lý sự kiện (như onClick) cho một thành phần?

Truyền xử lý sự kiện và các chức năng khác như là props cho các component con:

<button onClick={this.handleClick}>

2. Làm thế nào để liên kết một chức năng với một thể hiện thành phần?

Có một số cách để đảm bảo các hàm có quyền truy cập vào các thuộc tính thành phần như this.propsvà this.state, tùy thuộc vào cú pháp và các bước xây dựng mà bạn đang sử dụng. Bind in Constructor (ES2015)

class Foo extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

Class Properties (Stage 3 Proposal)

class Foo extends Component {
  // Note: this syntax is experimental and not standardized yet.
  handleClick = () => {
    console.log('Click happened');
  }
  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

Bind in Render

class Foo extends Component {
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <button onClick={this.handleClick.bind(this)}>Click Me</button>;
  }
}

Arrow Function in Render

class Foo extends Component {
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <button onClick={() => this.handleClick()}>Click Me</button>;
  }
}

Sử dụng Arrow Function in Render sẽ tạo ra một Function mới mỗi lần thành phần render lại, có thể phá vỡ tối ưu hóa dựa trên so sánh nhận dạng nghiêm ngặt.