TypeScript React を使用してクリック イベント関数をデバウンスする
P粉032649413
P粉032649413 2023-08-27 10:33:19
0
1
465
<p>ボタンの複数回のクリックを避けるために、onclick 関数に lodash デバウンス関数を実装しようとしています。私が思いついた解決策は次のとおりです: </p> <pre class="brush:php;toolbar:false;">function saveForm() { //ここでいくつかの操作を行います } <ボタン onClick={debounce(() => saveForm, 1500, { maxWait: 2000 })}> 保存 </ボタン></pre> <p>リターンの外側で関数に対してデバウンスを実行し、そのデバウンスされた関数を onclick で使用する例をたくさん見かけます。ボタン要素に対して直接デバウンス(インライン)を実行するのは間違っていますか? </p>
P粉032649413
P粉032649413

全員に返信(1)
P粉744691205

適切なコーディングの実践という観点からは、JSX にビジネス ロジックを入れすぎないようにする必要があります。 onClick ハンドラーを JSX の外部に抽出するだけです。

第二に、シェーク解除後に saveForm に戻る必要はありません。代わりに電話してください。したがって、 () => saveFormsaveForm に置き換えます。

リーリー

useCallback フックを使用することもできます。 useCallback フックを使用するためのベスト プラクティスについては、必要に応じて探索していただくことに任せます。

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート