Utilisez TypeScript React pour anti-rebond des fonctions d'événement de clic

Question

J'essaie d'implémenter la fonction anti-rebond lodash sur la fonction onclick pour éviter plusieurs clics sur le bouton. La solution que j'ai trouvée est la suivante :

fonction saveForm() {
//Faire quelques opérations ici
}

<Button onClick={debounce(() => saveForm, 1500, {
              maxWait : 2000 })}>
              sauvegarder
</Bouton>

Je vois de nombreux exemples d'exécution d'un anti-rebond sur une fonction en dehors du retour, puis d'utilisation de cette fonction anti-rebond dans onclick. Est-ce une erreur d'effectuer un anti-rebond (en ligne) directement sur l'élément bouton ?

Answer 1

En termes de bonnes pratiques de codage, vous devez éviter de mettre trop de logique métier dans JSX. Extrayez simplement votre gestionnaire onClick en dehors de JSX.

Deuxièmement, vous ne voulez pas revenir en arrière saveForm。而是调用它。所以用saveForm替换() => saveForm après l'anti-shake.

function saveForm() {
//在这里执行操作
}

const debouncedClickHandler = debounce(saveForm, 1500, {maxWait: 2000})

<Button onClick={debouncedClickHandler}>保存</Button>

Vous pouvez également utiliser useCallback钩子。如果需要，我把使用useCallbackLes meilleures pratiques en matière de hooks vous sont laissées à explorer.