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

バインディング

反応器でのバインドを知る前に
Javascriptのthisとバインド

を知っておくべきです.

Javascript this

JavaScriptでは、オブジェクトメソッドから
これは、このメソッドを含むobjectを表す(

)

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

において、これはAを意味する.
Aのアイテムを受け取るハロー出力

しかし、以下の例に示すように、

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

A.sayHelloをBに割り当て、未定義の値

を出力する.

の理由は、Bという変数に含まれると、Aとの関係が

を失うからである.
このとき必要なのはバインディングである

バインド(binding)

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

Bindの辞書の意味は:

A.sayHelloを送信場合、A送信にバインドすれば

である.

応答はJavaScriptのthisを同様に使用するため、

をバインドする必要がある.

レスポンスにバインド

応答で主に使用される方法は、コンストラクション関数でバインドされます.

次の例では、エラーが発生しました.

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 property"setState"of undefinedエラーが発生します.

バインドが必要です

Constructorでバインド

次の例は、主に一般的なバインド方法です.
これは公式文書で紹介されている方法です.

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>
    )
  }
}

矢印関数のバインド

ES 6から始まる矢印関数を使用します.
自動バインド