TypeScript React を使用してクリック イベント関数をデバウンスする
P粉032649413
2023-08-27 10:33:19
<p>ボタンの複数回のクリックを避けるために、onclick 関数に lodash デバウンス関数を実装しようとしています。私が思いついた解決策は次のとおりです: </p>
<pre class="brush:php;toolbar:false;">function saveForm() {
//ここでいくつかの操作を行います
}
<ボタン onClick={debounce(() => saveForm, 1500, {
maxWait: 2000 })}>
保存
</ボタン></pre>
<p>リターンの外側で関数に対してデバウンスを実行し、そのデバウンスされた関数を onclick で使用する例をたくさん見かけます。ボタン要素に対して直接デバウンス(インライン)を実行するのは間違っていますか? </p>
適切なコーディングの実践という観点からは、JSX にビジネス ロジックを入れすぎないようにする必要があります。
onClick
ハンドラーを JSX の外部に抽出するだけです。第二に、シェーク解除後に
リーリーsaveForm
に戻る必要はありません。代わりに電話してください。したがって、() => saveForm
をsaveForm
に置き換えます。useCallback
フックを使用することもできます。useCallback
フックを使用するためのベスト プラクティスについては、必要に応じて探索していただくことに任せます。