为了处理按钮多次点击,会连续跳转的问题,使用了
- 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;