Maison  >  Questions et réponses  >  le corps du texte

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

<p>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 : </p> <pre class="brush:php;toolbar:false;">fonction saveForm() { //Faire quelques opérations ici } <Button onClick={debounce(() => saveForm, 1500, { maxWait : 2000 })}> sauvegarder </Bouton></pre> <p>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 ? </p>
P粉032649413P粉032649413441 Il y a quelques jours455

répondre à tous(1)je répondrai

  • P粉744691205

    P粉7446912052023-08-28 00:00:43

    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.

    répondre
    0
  • Annulerrépondre