> For the complete documentation index, see [llms.txt](https://haonm.gitbook.io/react-the-complete-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://haonm.gitbook.io/react-the-complete-guide/understanding-the-base-features-and-syntax/passing-method-references-between-components.md).

# 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? <a href="#how-do-i-pass-an-event-handler-like-onclick-to-a-component" id="how-do-i-pass-an-event-handler-like-onclick-to-a-component"></a>

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? <a href="#how-do-i-bind-a-function-to-a-component-instance" id="how-do-i-bind-a-function-to-a-component-instance"></a>

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.props`**&#x76;à **`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.

#### &#x20; <a href="#how-do-i-bind-a-function-to-a-component-instance" id="how-do-i-bind-a-function-to-a-component-instance"></a>