[レスポンス]バインディングイベント

コントロールスライダで親構成部品にアクセスする必要がある場合は、構成部品インスタンスの関数をバインドする必要があります.
反応器でイベントをバインドする方法について説明します.

バインド方法

1.ジェネレータにバインド

class Foo extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

一般的な方法

2.renderメソッドで矢印関数を使用する

class Foo extends Component {
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <button onClick={() => this.handleClick()}>Click Me</button>;
  }
}

構成部品をレンダリングするたびに新しい関数が作成されるため、厳密な比較では最適化が損なわれる可能性があります.

3.renderメソッドでバインド

class Foo extends Component {
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <button onClick={this.handleClick.bind(this)}>Click Me</button>;
  }
}

構成部品をレンダリングするたびに新しい関数が作成されるため、パフォーマンスに影響を与える可能性があります.

4.等級割引

class Foo extends Component {
  handleClick = () => {
    console.log('Click happened');
  }
  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

これは実験段階で、まだ標準ではありません.

サンプルコード

class App extends React.Component {
  constructor() {
    super();
    this.handleClick2 = this.handleClick1.bind(this);
  }
  handleClick1() {
    console.log(this);
  }
  handleClick3 = () => console.log(this);
 
  render() {
    return (
      <div>
        <button onClick={this.handleClick1()}> click 1 </button>
        <button onClick={this.handleClick1}> click 2 </button>
        <button onClick={this.handleClick2}> click 3 </button>
        <button onClick={this.handleClick3}> click 4 </button>
      </div>
    );
  }
}

誰もが異なるハンドルでクリックするボタンを4つ持っています.ボタンごとに何が起こるか見てみましょう.

1ボタンをクリック

handleClick1() {console.log(this);}
  
<button onClick={this.handleClick1()}> click 1 </button>

コンソールを表示すると、ボタンをクリックしないとオブジェクトが表示され、ボタンをクリックしても何も起こりません.
レンダリングするたびに、反応は関数を呼び出します.これは、レンダリング時にthis.handleClick1()が実行されたためです.

2ボタンをクリック

handleClick1() {console.log(this);}
  
<button onClick={this.handleClick2}> click 1 </button>

click 1ボタンからレンダリングすると()は関数が事前に呼び出されたためにクリアされます()が、結果は
2ボタンをクリックすると、コンソールにはオブジェクトが表示されず、undefinedが表示されます.

3ボタンをクリック

class App extends React.Component {
  constructor() {
    super();
    this.handleClick2 = this.handleClick1.bind(this);
  }
  
<button onClick={this.handleClick2}> click 3 </button>

생성자에서 바인딩하기
3ボタンをクリックすると、このオブジェクトがコンソールに表示されます.
click 3ボタンのアクティビティはclick 1ボタンのアクティビティに.bind(this)万個増加した.

4ボタンをクリック

handleClick3 = () => console.log(this);
  
<button onClick={this.handleClick3}> click 4 </button>

render 메서드 안에서 화살표 함수 사용4ボタンをクリックすると、このオブジェクトがコンソールに表示されます.click 2ボタンを화살표 함수に変更