【JavaScript】.bind() について

Question

いつも大変お世話になっております。

現在 react, redux の勉強をしています。
以下の書籍を読んでいるのですが、ソースコード上でわからない箇所があります。

https://www.amazon.co.jp/React%E3%81%A7Redux%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86-kenpapa-ebook/dp/B07P7DBLBL/ref=pd_sbs_5/357-6202545-0875734?pd_rd_w=bbtCx&pf_rd_p=4e34a507-1281-42ae-953a-93a761caa89c&pf_rd_r=K809DSBG5K4HB7H33P0X&pd_rd_r=5c59afb5-dac9-45e6-a59c-10ae221f58c7&pd_rd_wg=68Nva&pd_rd_i=B07P7DBLBL&psc=1

import React from 'react';
import {setName, setAge} from "./actions/userAction";
import {connect} from "react-redux";

class App extends React.Component {

  clickSetName() {
    this.props.setName("Taro Yamada");
  }

  clickSetAge() {
    this.props.setAge("30");
  }

  render() {
    return (
      <>

        <button onClick={this.clickSetName.bind(this)}>
          Set Name
        </button>

        {this.props.name}<br/>

        <button onClick={this.clickSetAge.bind(this)}>
          Set Age
        </button>

        {this.props.age}

      </>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    name: state.name,
    age: state.age,
  };
}

const mapDispatchToProps = (dispatch) => {
  return {

    setName: (name) => dispatch(setName(name)),
    setAge: (age) => dispatch(setAge(age))

  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

上記ソースコードの、{this.clickSetName.bind(this)}と{this.clickSetAge.bind(this)}は
{this.clickSetName}と{this.clickSetAge}ではいけないのでしょうか？

試したけれど、確かに動作はしなかったです。
ただ、なぜ.bind(this)をつける必要があるのかがわかりません。

どなたかご教授いただけますと幸いです。

それではどう宜しくお願い致します。

Answer 1

なぜ.bind(this)をつける必要があるのかがわかりません。

clickSetNameやclickSetAgeが実行されるとき、メソッド内で参照するthisはこのクラスのインスタンスであってほしいからです。

Comments

[matsuo_basho]

ありがとうございます！