using “this” in React event handler method

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

[js]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>
);
}
}[/js]

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.