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

4094 ワード
JavaScript es6 React JSX JavaScript テキストリンク

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されないようです。