ReactのイベントにJavascriptのクラスで定義したメソッドを渡すときの注意

はじめに

初投稿になります。
なんか、世の中アウトプットが重要らしいので自分も学んだことをアウトプットしていこうかと
といってもググったことをまとめるぐらいですけど

React動かん、、、

Reactを勉強中ですが、コンポーネントのクラスを作って、reander関数のなかでdiv要素のonClickにクラスのメソッドを渡したのですが、なんか動きません。

SandBox.jsx

        class ClockCompo extends Component {
            constructor(props) {
                super(props);
                /* 初期化とか、、、*/
            }
            changeDisplayMode() {
                /* 処理、、、*/
                this.setState(newState);
            }
            render(){
                return (
                    <div onClick={this.changeDisplayMode}>
                        hoge
                    </div>
                );
            }
        }

#　なぜに、、、
といってもこれはよくやられる間違いみたいです。
普通にクラスのメンバ関数を定義するとthisは束縛されないのだとか、、、
（それでクラスとしての役割果たせてるのかよくわからんのですが、、、だれか教えてください、、、）
Javascriptのスコープ？とかはもっと勉強したいところ

解決策

reactの公式に解決策かいてますね。
https://reactjs.org/docs/handling-events.html

わたしは、アロー関数を使った解決策が一番しっくりくるかな、、、
なぜ、アロー関数でメソッドを定義することにより解決できるのか、、、
それは、thisの扱いが違うからの模様です。
（ほかの人のqiitaを参照、、、
https://qiita.com/mejileben/items/69e5facdb60781927929

アロー関数だと定義時にthisを束縛させるけど、
通常の関数はthisは呼び出し元オブジェクトを利用するみたいです。

this.changeDisplayModeってしてるんだから、同じオブジェクトにきまってるじゃん、、、とかおもったのですが、コールバック関数として渡してるから、ちがうthisをもとに呼び出されてたりするのでしょうか。

ただし、この書き方はES7からの機能っぽい？ので注意。
公式曰く、create-react-appで作成したプロジェクトについてはデフォルトで変換してくれるみたいです。

SandBox.jsx

        class ClockCompo extends Component {
            constructor(props) {
                super(props);
                /* 初期化とか、、、*/
            }
            changeDisplayMode = () => { // アロー関数で定義し、変数に代入する
                /* 処理、、、*/
                this.setState(newState);
            }
            render = () => {
                return (
                    <div onClick={this.changeDisplayMode}>
                        hoge
                    </div>
                );
            }
        }

編集後記

たいした内容ないのに、qiitaに記事書くのなかなかつかれますね、、、
まあ、自分のメモ用にのこしていこう