Bind function (ok)

https://freetuts.net/component-api-trong-reactjs-2379.html

Đây là phần mà rất nhiều bạn gặp lỗi liên quan đến cú pháp ES6 khi thực hiện gọi hàm trong class component, giả sử mình muốn khi người dùng click vào nút Change sẽ gọi hàm changeTitle().

Khi bạn gọi hàm bằng cách này sẽ gây ra lỗi không tồn tại biến this trong hàm changeTitle().

import React from "react";
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      title: "Freetuts.net"
    };
  }
  changeTitle() {
    //Sẽ không nhận được giá trị của this.
    //Từ đó không thể set state được.
    this.setState({
      title: "Freetuts.net New"
    });
  }
  render() {
    //Khi bạn gọi hàm như này sẽ gây ra lỗi. Vì không chỉ định giá trị của biến this cho hàm changeTitle.
    return (
      <div>
        <h1 id="title">{this.state.title}</h1>
        <button onClick={this.changeTitle.bind(this)}>Change Color</button>
      </div>
    );
  }
}
export default App;