deve.K

エンジニアが未来を切り開く。

React基礎 Bind(バインド)方法と使い方

react画像

React クラスでのthis

thisは実行方法によって参照先が変わります、ES6のJavaScriptのクラスメソッドのデフォルトはバインドはされていません。

JavaScriptの関数・メソッド内ではthisという値が使えます、そしてそれは呼び出し方によって変化します。

JSXではメソッドをバインドする事によりJavaScript本来の動作と同じように実行されます。

Reactを使い始めた人は、イベントハンドラーにthisをBindしていないというミスに出くわすはずです。

その問題に対する解決策を説明するために、以下のようなシンプルなコンポーネントを作成しました。

thisのバインドを持たないシンプルなコンポーネントとなります。

ボタンクリック時undefinedエラー

class App extends React.Component {
   constructor (props) {
     super(props)
       this.state = {
       changeText: "変更前の表示です"
              }
            }

   ChangeBtn = () => {
this.setState({ 
  changeText: "変更された表示です"
       });
            }

            render () {
                return (
<button onClick={this.ChangeBtn}>
                 ボタン
              </button>
                )
            }

}

Reactエラー画像

上記ではthis.ChangeBtnをバインドをせず、関数が呼ばれるとthisはundefinedエラーを返します。

バインドする前のthisの参照先が意図したものとは別のものになっている為undefinedが返ってきます。

それを回避する為にthisをバインドします。

thisをバインドする

Reactには事前定義されたbind()メソッドがあり、これを使用してクラスベースのコンポーネントの関数に引数を渡すことができます。

コンストラクタ内でコンポーネントのthisにbindをします。

// エラー解決

class App extends React.Component {
  constructor (props) {
    super(props)
      this.state = {
       changeText: "変更前の表示です"
              }
//thisのバインド
this.ChangeBtn = this.ChangeBtn.bind(this)
            }

   ChangeBtn = () => {
this.setState({ 
   changeText: "変更された表示です"
               });
            }

            render () {
                return (
<button onClick={this.ChangeBtn}>
                 ボタン
              </button>
                )
            }

}

ReactのDEMO画像

コールバックで実行したいメソッドthis.ChangeBtnを設定し、その後バインドをしChangeBtnメソッド内でのthisの参照先をクラスとしてバインドさせるという事になります。

※ 注意点はrenderメソッドやライフサイクルメソッドなどはバインドする必要はありません。

それらは他のコンポーネントに渡すことがないからです。

別の回避方法

先程コンストラクタ内でコンポーネントのthisにbindをすると言いましたが、必ずしもコンストラクタ内である必要性はありません。

他の方法で回避をする例を見ていきましょう。

直接ボタンタグにBind()する

      
render () {
return (  //bindする
<button onClick={this.ChangeBtn.bind(this)}>
 ボタン
</button>
  )
}

しっかりbindの引数にはthisを入れるのを忘れないようにしましょう。

イベントハンドラーでアロー関数を使用する

  
render () {
 return (  //アロー関数
<button onClick={ () => this.ChangeBtn() }>
ボタン
 </button>
   )
}

イベントハンドラーでアロー関数を使用します。

呼び出す関数内のthisを現在のクラスインスタンスにもバインドされます。

こちらを使用する場合は、メソッドに引数の()をつけ忘れないように気をつけてください。

イベントハンドラーに引数を渡す

ChangeBtn = (e) => {
this.setState({ 
  changeText: "変更後の表示!!"
   });
}

render () {
 return (  
<button onClick={ (e) => this.ChangeBtn(e) }>
ボタン
</button>
   )
}

イベントハンドラーの引数にeを渡してあげます。

クラスコンポーネントイベントハンドラーで値の変更する際はしっかりとコンストラクター内にbindしてあげるか、別の方法で回避をする事を忘れないようにして下さい。

ですが、なるべくコンストラクター内でイベントハンドラーをバインドして、インスタンスごとに1回だけバインドされるようにすることをお勧めします。

ThisのBindなぜ必要??

this.ChangeBtn = this.ChangeBtn.bind(this);

この行は一度に多くのことを行います。

Reactのイベントからクラスメソッドを呼び出すためになぜbind()を使用する必要があるのか​​疑問に思われるかもしれません。

thisはコンストラクタの中にあるので、他の何かではなくオブジェクトのインスタンスでなければならないので、信頼できるものです。

bindメソッドは関数ChangeBtnを受け取り、まったく同じことをする関数を返します。

ただし、関数の内部でオブジェクトのインスタンスが固定されていることが条件です。

新しい関数を既存のChangeBtnの代わりに割り当てます。

新しい関数を割り当てて既存のChangeBtnを置き換えます。これにより、thisが呼び出されるたびに、どこから呼び出されても、オブジェクトインスタンスが使用され、他の値は使用されません。

本日は以上となります。

最後までこの記事を読んで頂きありがとうございます。

プライバシーポリシー