useEffect、setTimeout防止按钮连续点击

2019-08-06  本文已影响0人  奋斗的小小小兔子

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

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;
上一篇下一篇

猜你喜欢

热点阅读