美文网首页
useEffect、setTimeout防止按钮连续点击

useEffect、setTimeout防止按钮连续点击

作者: 奋斗的小小小兔子 | 来源:发表于2019-08-06 18:16 被阅读0次

    为了处理按钮多次点击,会连续跳转的问题,使用了

    • useEffect
    • setTimeout
    import React, { useState, useEffect } from 'react';
    
    const Scenes = () => {
      const [btnDisabled, setBtnDisabled] = useState(false);
    
      const handleClick = () => {
        setBtnDisabled(true);
        window.location.href = 'www.baidu.com';
      };
    
      useEffect(() => {
        let timer;
        if (btnDisabled) {
          timer = setTimeout(() => {
            setBtnDisabled(false);
          }, 2000);
        }
        return () => {
          if (timer) { clearTimeout(timer); }
        };
      }, [btnDisabled]);
    
      return (
        <button
          disabled={btnDisabled}
          onClick={handleClick} />
      );
    };
    
    export default Scenes;
    

    相关文章

      网友评论

          本文标题:useEffect、setTimeout防止按钮连续点击

          本文链接:https://www.haomeiwen.com/subject/fygidctx.html