(JSX) メソッド内でthisを正しく参照する

(JSX) メソッド内でthisを正しく参照する:

React.Componentのメソッドを使う際にthisが正しく参照できないことがあった。その原因と対処法を記す。動かせるコードはこちら。

問題

Click Me!という文字列をクリックした時にThanksと文字列が切り替わるようなコンポーネントを実装したい。


ここで次のようなコードにすると、クリックしても文字が切り替わらない。

class Clickable extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { msg: "Click Me!"}; 
  }; 
  render () { 
     return <h1 onClick={this.handleClick}>{ this.state.msg }</h1>; 
  }; 
  handleClick () { this.setState({ msg: "Thanks!"}); }; 
} 
 
ReactDOM.render( 
  <Clickable/>, 
  document.getElementById('mount') 
); 

原因はメソッドhandleClickを定義した時に、thisのスコープがメソッド内のものに置き換わってしまい、クラス内のスコープのthisを参照することが出来ないためだ。

正しく動作させるための対処法を以下に書いていく。

対処法①：コンストラクタで束縛する

最初の対処法はクラスのコンストラクタ内でクラスのスコープでのthisをメソッドに束縛させる方法だ。

class Clickable extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { msg: "Click Me!"}; 
    // 対処法①　 コンストラクタ内でhandleClickを束縛する 
    this.handleClick = this.handleClick.bind(this); 
  }; 
  ... 
} 

この方法はうまくいくが、束縛はコンストラクタ内で行う必要があるため、コンストラクタを省略することが出来なくなるという欠点がある。

対処法②：クロージャを使う

２番目の対処法はメソッド呼び出しの時にクロージャを使うことだ。renderが実行された時、クロージャによってクラスのthisが束縛されるので、メソッド内で正しく参照を行うことが出来るようになる。

render () { 
     return <h1 onClick={() => this.handleClick()}>{ this.state.msg }</h1>; 
  }; 

この書き方ではコンストラクタ内で束縛する必要がなくなるため、コンストラクタが不必要な場合は省略することが出来る。

対処方③：アロー関数を使う

最後の対処法はメソッドhandlwClickの定義にアロー関数表記を使うことだ。アロー関数は変数のリスコープを行わないので、元々のthisをメソッド内部でそのまま参照することが出来る。JavaScriptでは関数は第1級のオブジェクトであるため、アロー関数をクラスのメンバ変数として登録している形となっている。

handleClick = () =>  { this.setState({ msg: "Thanks!"}); }; 

この書き方でもコンストラクタ内で束縛を行う必要はないので、コードが短くなる。

まとめ

メソッド内でクラスのthisを参照する方法を3つ紹介した。

どうもJSのスコープは奥が深いというかクセがある。。