JavaScriptでのこのメソッド

バインディングを理解するには、まずJavaScriptの「this」メソッドを理解する必要があります.
そこで,反応のバインディングを知る前に,JavaScriptを用いたこの方法によるバインディングについて理解する.

 let A = {  
    prop: 'Hello',
    sayHello: function() {
        console.log( this.prop );
    }
};
 
A.sayHello(); //"Hello"

JavaScriptでは、オブジェクト内のメソッドthisは、このメソッドを含むオブジェクトを指します.上記の例では、sayHelloメソッドのthisがaのオブジェクトとなり、a.prop helloがコンソール出力helloに渡される.
つまり、これはAが、AのアイテムHello出力を受け取ることを意味する.ここまでは非常に基本的なthisの使い方です.では、次の例を見てみましょう.

let A = {  
    prop: 'Hello',
    sayHello: function() {
        console.log( this.prop );
    }
};

let B = A.sayHello();
console.log(B); // undefined

今回AのsayHello()をBという変数に入れて出力することでundefinedを決定することができる.
これは,変数BにA.sayHelloが含まれている場合,sayHello()とAとの関係が失われるためである.
この場合に必要なのが「データバインド」です.

JavaScriptのバインド

バインドは「バインド」の辞書の意味で、符号化されたバインドは、2つのデータまたは情報のソースをマッチングすることを意味します.すなわち,画面上のデータをブラウザメモリ内のデータ(複数のJavaScriptオブジェクト)と一致させる.Aとの関係が切れて悲しい私たちsayHello()をつなげましょう

let A = {  
    prop: 'Hello',
    sayHello: function() {
        console.log( this.prop );
    }
};
 
let B = A.sayHello.bind(A);
console.log(B); // Hello

バインドの方法は簡単です.
A.sayHello()を伝えるときA.sayHellobind(A)のように、Aにバインドして送信すればよい.
これまでthisメソッドを用いたJavaScriptでのバインドについて理解してきた.ただしreact内でバインドする方法とJavaScript内でバインドする方法は若干異なります.いくつかの方法がありますが、Reactでのバインドは、主にイベントメソッドをコンポーネントに関連付けるために使用されます.以下の例を見てみましょう.

レスポンスバインディング

class EventBind extends Component {
  constructor(props) {
    super(props)

    this.state = {
      message: 'Hello'
    }
  }

  handleClick() {
    this.setState({
      message: 'Goodbye!' // 클릭하면 Goodbye 바뀌는 함수 
    })
  }

  render() {
    return (
      <div>
        <div>{this.state.message}</div>
        <button onClick={this.handleClick}>Click</button>
      </div> // 온클릭 이벤트와 함수 연결 
    )
  }
}

上の例は、ボタンをクリックしてHelloをGoodbyeにする例で、エラーの原因となるコードです.バインドされていないため、ボタンを押すと未定義エラーのCannot read属性「setState」が発生します.では、次のようにバインドします.

class EventBind extends Component {
  constructor(props) {
    super(props)

    this.state = {
      message: 'Hello'
    }

    this.handleClick = this.handleClick.bind(this); // 바인딩!!!!!!!!!!!
  }

  handleClick() {
    this.setState({
      message: 'Goodbye!'
    })
    console.log(this) // EventBind
  }

  render() {
    return (
      <div>
        <div>{this.state.message}</div>
        <button
          onClick={this.handleClick}> // 이벤트와 함수 연결 
          Click
          </button>
      </div>
    )
  }
}

コンストラクション関数()でこの操作を実行します.update = this.update.bind(this); 文を挿入してバインドすると、render()でonClick={this.update}を行うと、thisは適用コンポーネントのthisであることがわかります.
それ以外に、reactバインディングメソッドでは、ES 2015が提供する機能arrow関数をバインディングに使用することができ、onClickButtonメソッドを「()=>」arrow関数に設定するだけでよい.