React Class内での関数定義(bindしよう)

はじめに

個人的なメモレベルです。

[注意]
現在、Reactでの開発は、関数コンポーネントが主流です。
これからReactを学習しようとしてる方は公式ドキュメントに目を通してみてください。

関数コンポーネント前提で学習できる書籍も2021年から充実してきてるので、興味があれば目を通してみると良いかもしれません。

オライリーの文体が苦手な人はここら辺は初学者の方には良いかも。

メソッド記法での問題点

ReactでsetStateを利用する際に、JSXで、以下のように書くことが多いかなと思う。

クラスのプロパティとして関数を定義

doPlus = () => {
    this.setState({count: this.state.count + 1});
};

<button onClick={this.doPlus}>ボタンを押したらプラスするよ</button>

しかし、以下のような書き方の場合、初期化時にbindしとかないとエラーになります。

これクラス内に定義されたメソッドであっても、実行方法によって、thisの参照先は変わってしまうJSの仕組み故。この場合、buttonに関数オブジェクトをそのまま渡しているので、thisの参照先はbuttonになってしまう。

JSの初心者が最初にぶつかる壁はthisの扱いですよね。。。

ボタンを押下すると、undefindeエラーとなる

doPlus(){
    this.setState({count: this.state.count + 1})
}

<button onClick={this.doPlus}>ボタンを押したらプラスするよ</button>

上記のようにメソッド記法で書きたいんだ！！！て場合は、classの初期化時にthisを必ずbindしておきましょう。

初期化処理

constructor(props) {
    super(props);
    this.state = {
        count: 0
    }
    this.doPlus = this.doPlus.bind(this);
}

これで解決😄