検索テキストに基づいてコンテンツを動的に更新する

Question

私はメディアファイルをテーブルビューに読み込んだ反応アプリケーションを構築しています。このページには検索バーがあります。私は、ユーザーが検索バーにテキストを入力し続けると、多くのページがコンテンツを動的に更新するのを見てきました。どうやってやるの？私はバックエンドで準備ができている検索APIを持っています。このAPIは、検索テキストに基づいて読み込む新しいコンテンツを私に提供します。現在、私は検索アイコンがクリックされるたびにこのapiを呼び出すと思うことができます。しかし、ユーザーがテキストを入力し続けると自動的にコンテンツが更新されるような動的なものにしたいと考えています。これどうやってするの？

Answer 1

ボタンのイベントハンドラがすでに動作している場合、あなたは、単に検索入力フィールドのonChangeイベントのためにそれを使用することができます。

const mySearchHandler = function(event) { 
    const searchQuery = event.target.value; 

    ... 
} 

... 

<input onChange={mySearchHandler} /> 

---

あなたが作ることがないように注意するとよいでしょうAPI呼び出しがあまりにも頻繁に、たとえばユーザーが高速入力した場合。 Lodashの_.throttle()は良い出発点かもしれません。