deve.K

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

English

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


スポンサーリンク

react画像

Bind(バインド)とは

バインドはClassコンポーネントイベントハンドラを設定し他のコンポーネントに渡す際に必要となるメソッドです。

ThisのBindなぜ必要??

thisは実行方法によって参照先が変わります
ES6のJavaScriptのクラスメソッドのデフォルトはバインドはされていません。
JavaScriptの関数・メソッド内ではthisという値が使えます、そしてそれは呼び出し方によって
変化します。
JSXではメソッドをバインドする事によりJavaScript本来の動作と同じように実行されます。
なので下コードの場合this.ChangeBtnをバインドをせず、関数が呼ばれるとthisはundefinedエラーを返します
バインドする前のthisの参照先が意図したものとは別のものになっている為undefinedが返ってくる

ボタンクリック時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をバインドします。
コールバックで実行したいメソッドthis.ChangeBtnを設定し、その後バインドをしChangeBtnメソッド内でのthisの参照先をクラスとしてバインドさせるという事になります。
コンストラクタ内でコンポーネントの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画像


注意点はrenderメソッドやライフサイクルメソッドなどはバインドする必要はありません。
それらは他のコンポーネントに渡すことがないからです。

別の回避方法


先程コンストラクタ内でコンポーネントのthisにbindをすると言いましたが、別のやり方で回避をする方法がありますのでそちらも紹介致します。

直接ボタンタグにBindする

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


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

コールバック内にアロー関数を使用する

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


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

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

  //割愛します

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

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


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

プライバシーポリシー