using “this” in React event handler method

ใน method ที่ใช้เป็น Event handler ถ้าเขียนโดยใช้ ES2015 มันจะไม่สามารถเรียก this เพื่อเข้าถึง object ของ Component ได้ ซึ่งจะต้องสั่ง bind this ไว้ใน constructor ลักษณะนี้

class MyButton extends React.Component {
  static defaultProps = {
    text: 'Click'
  }
  static propTypes = {
    text: React.PropTypes.string.isRequired
  }
  state = {
    text: this.props.text
  }

  constructor(props) {
     super(props);
     this.clickHandler = this.clickHandler.bind(this); // <------ Bind here
  }

  clickHandler(e) {
    e.preventDefault();
    this.setState({ text: 'clicked' });
  }

  render() {
    return(
      <button onClick={ this.clickHandler }>
          { this.state.text }
      </button>
    );
  }
}

Leave a Reply

Your email address will not be published. Required fields are marked *