Posted at

Reactのイベントハンドラにおいて「Cannot read property '〇〇' of undefined」と出る

ES6記法でReactのコードを書いていた時、イベントハンドラ内で this が使えなくなっていたので、その原因を共有します。


問題のコード


App.jsx

class App extends React.Component {

constructor(props) {
super(props);
this.state = {
status: "No"
};
}
changeState() {
this.setState({ status: "Yes" });
}
render() {
return (
<div>
<button onClick={ this.changeState }>Change!</button>
<div>{this.state.status}</div>
</div>
);
}
}

この場合、ブラウザで実行してみると以下のように表示されます。



このボタンを押すと表示される文字が「Yes」に変わるはずなのですが、変わることはなく、下のようなエラーが発生しました。


解決策

render() 関数の onClick において、以下のように変更します。


App.jsx

<button onClick={ this.changeState.bind(this) }>Change!</button>



原因

ES5の React.createClass を使った場合はイベントハンドラが自動でbindされるのですが、ES6で React.Component を作成した場合、イベントハンドラは自動でbindされないようです。