RxJSを介してreactコンポーネントのメソッドの呼び出しを調整するにはどうすればよいですか?

イゴール・ゴロポロソフ

私は次のTSXコードを持っています:

public render() {    
  return (
    <div onWheel={this.onWheel}>
      {children}
    </div>
  );
}

private onWheel(event: React.SyntheticEvent<HTMLDivElement>) {...}

頻繁なメソッド呼び出しを防ぐために、RxJSthis.onWheel使用して呼び出しを抑制たいと思います。

これどうやってするの?

ZahiC

簡単な解決策は、サブジェクトを使用することです。

  • サブジェクトを作成し、コンポーネントマウントでスロットルを使用してサブスクライブします
  • すべてのイベントで「next」メソッドを呼び出します
  • コンポーネントのアンマウント時に登録解除

TSシンボルが削除されたコード:

render() {    
  return (
    <div onWheel={e => this.onWheel$.next(e)}>
      {children}
    </div>
  );
}

componentWillMount() {
    this.onWheel$ = new Rx.Subject();
    this.onWheel$.throttleTime(500).subscribe(this.onWheel);
}

componentWillUnmount() {
    this.onWheel$.unsubscribe();
}

onWheel(event) {...}

実用的な例については、このjsfiddle参照してください

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

親コンポーネントから子コンポーネントのメソッドを呼び出すにはどうすればよいですか?

分類Dev

React.jsの別のクラスコンポーネントからメソッドを呼び出すにはどうすればよいですか?

分類Dev

コンポーネントのメソッドをビューから呼び出すにはどうすればよいですか?(vue.js 2)

分類Dev

reactの別のコンポーネントのコンポーネントからメソッドをエクスポートまたは呼び出すにはどうすればよいですか?

分類Dev

クラスプロトタイプまたは酵素ラッパーインスタンスを介してreactコンポーネントのメソッドを正しくスパイするにはどうすればよいですか?

分類Dev

Angular 6コンポーネントからサービスへのメソッド呼び出しのステータスを取得するにはどうすればよいですか?

分類Dev

putメソッドを使用してvueコンポーネントのデータを更新するにはどうすればよいですか?

分類Dev

Vueコンポーネントのメソッドでメソッドを正しく使用するにはどうすればよいですか?

分類Dev

メソッドを必要とする1つのコンポーネントと、それを必要としない他のコンポーネントによって使用されるように、共通のコンポーネントでメソッドを使用するにはどうすればよいですか?

分類Dev

RabbitMQ Publish and Subscriberパターンを使用しているときに別のメソッドを呼び出すにはどうすればよいですか?

分類Dev

Typescriptで、イベントハンドラーとして呼び出される同じクラスの別のメソッドからクラスメソッドを呼び出すにはどうすればよいですか?

分類Dev

メインスレッドでメソッドを呼び出して、他のスレッドを終了するにはどうすればよいですか?

分類Dev

メソッドチェーンを使用して、関数がコースを実行するのを待ってから再度呼び出す前に、同じJavaScript関数を繰り返し呼び出すにはどうすればよいですか?

分類Dev

onReceiveメソッド呼び出しのこのSwiftコンパイラエラーを修正するにはどうすればよいですか?

分類Dev

ReactJS-子コンポーネントから親メソッドを呼び出すにはどうすればよいですか?

分類Dev

非同期関数からコンポーネントメソッドを呼び出すにはどうすればよいですか?

分類Dev

複数のオブジェクトチェーンメソッド呼び出しをコーディングして、複数行のコードにまたがって続行するにはどうすればよいですか?

分類Dev

複数のオブジェクトチェーンメソッド呼び出しをコーディングして、複数行のコードにまたがって続行するにはどうすればよいですか?

分類Dev

メソッド呼び出しを使用して特定のパネルを別のパネルに表示するにはどうすればよいですか?

分類Dev

reactを含めずにnpmを介してreactベースのコンポーネントを公開するにはどうすればよいですか?

分類Dev

スタートアップフォームのメソッドを使用して、子フォームから呼び出されたときにそのコントロールを有効にするにはどうすればよいですか?

分類Dev

angle2のコンポーネントのサービスを介して呼び出されるルート変更でSetIntervalを停止するにはどうすればよいですか?

分類Dev

コンストラクターを使用してメソッドを自動的に呼び出すにはどうすればよいですか?

分類Dev

それぞれのメソッドがAuraRouterであるコントローラーを呼び出すにはどうすればよいですか?

分類Dev

ajaxを介してコントローラーのメソッドでデータを取得するにはどうすればよいですか?

分類Dev

ajax呼び出しからの応答後にreactes6コンポーネントを更新するにはどうすればよいですか?

分類Dev

reduxjsのmapStateToPropsを呼び出すreactコンポーネントの単体テストを作成するにはどうすればよいですか?

分類Dev

別のメソッド、たとえばメインメソッドからの呼び出しを介してtestNGを実行するにはどうすればよいですか?

分類Dev

構造体の配列の初期化を使用してコンストラクターを既に作成している場合、メソッドを呼び出すにはどうすればよいですか?

Related 関連記事

  1. 1

    親コンポーネントから子コンポーネントのメソッドを呼び出すにはどうすればよいですか?

  2. 2

    React.jsの別のクラスコンポーネントからメソッドを呼び出すにはどうすればよいですか?

  3. 3

    コンポーネントのメソッドをビューから呼び出すにはどうすればよいですか?(vue.js 2)

  4. 4

    reactの別のコンポーネントのコンポーネントからメソッドをエクスポートまたは呼び出すにはどうすればよいですか?

  5. 5

    クラスプロトタイプまたは酵素ラッパーインスタンスを介してreactコンポーネントのメソッドを正しくスパイするにはどうすればよいですか?

  6. 6

    Angular 6コンポーネントからサービスへのメソッド呼び出しのステータスを取得するにはどうすればよいですか?

  7. 7

    putメソッドを使用してvueコンポーネントのデータを更新するにはどうすればよいですか?

  8. 8

    Vueコンポーネントのメソッドでメソッドを正しく使用するにはどうすればよいですか?

  9. 9

    メソッドを必要とする1つのコンポーネントと、それを必要としない他のコンポーネントによって使用されるように、共通のコンポーネントでメソッドを使用するにはどうすればよいですか?

  10. 10

    RabbitMQ Publish and Subscriberパターンを使用しているときに別のメソッドを呼び出すにはどうすればよいですか?

  11. 11

    Typescriptで、イベントハンドラーとして呼び出される同じクラスの別のメソッドからクラスメソッドを呼び出すにはどうすればよいですか?

  12. 12

    メインスレッドでメソッドを呼び出して、他のスレッドを終了するにはどうすればよいですか?

  13. 13

    メソッドチェーンを使用して、関数がコースを実行するのを待ってから再度呼び出す前に、同じJavaScript関数を繰り返し呼び出すにはどうすればよいですか?

  14. 14

    onReceiveメソッド呼び出しのこのSwiftコンパイラエラーを修正するにはどうすればよいですか?

  15. 15

    ReactJS-子コンポーネントから親メソッドを呼び出すにはどうすればよいですか?

  16. 16

    非同期関数からコンポーネントメソッドを呼び出すにはどうすればよいですか?

  17. 17

    複数のオブジェクトチェーンメソッド呼び出しをコーディングして、複数行のコードにまたがって続行するにはどうすればよいですか?

  18. 18

    複数のオブジェクトチェーンメソッド呼び出しをコーディングして、複数行のコードにまたがって続行するにはどうすればよいですか?

  19. 19

    メソッド呼び出しを使用して特定のパネルを別のパネルに表示するにはどうすればよいですか?

  20. 20

    reactを含めずにnpmを介してreactベースのコンポーネントを公開するにはどうすればよいですか?

  21. 21

    スタートアップフォームのメソッドを使用して、子フォームから呼び出されたときにそのコントロールを有効にするにはどうすればよいですか?

  22. 22

    angle2のコンポーネントのサービスを介して呼び出されるルート変更でSetIntervalを停止するにはどうすればよいですか?

  23. 23

    コンストラクターを使用してメソッドを自動的に呼び出すにはどうすればよいですか?

  24. 24

    それぞれのメソッドがAuraRouterであるコントローラーを呼び出すにはどうすればよいですか?

  25. 25

    ajaxを介してコントローラーのメソッドでデータを取得するにはどうすればよいですか?

  26. 26

    ajax呼び出しからの応答後にreactes6コンポーネントを更新するにはどうすればよいですか?

  27. 27

    reduxjsのmapStateToPropsを呼び出すreactコンポーネントの単体テストを作成するにはどうすればよいですか?

  28. 28

    別のメソッド、たとえばメインメソッドからの呼び出しを介してtestNGを実行するにはどうすればよいですか?

  29. 29

    構造体の配列の初期化を使用してコンストラクターを既に作成している場合、メソッドを呼び出すにはどうすればよいですか?

ホットタグ

アーカイブ