每次单击react后延长超时时间
每次单击react后延长超时时间
提问于 2022-02-18 00:54:03
假设有以下简单的组件。当我单击该按钮时，消息将更改为Clicked 1秒钟，然后返回到-。但是，当我垃圾邮件按钮时，我希望标题是Clicked，但是在最后一次单击按钮之后，它应该返回到-。基本上，我希望每次单击都可以扩展超时。
如果这是一个简单的JS函数，我只需在每次单击之后清除间隔并设置另一个超时。但是，我不知道如何使用实现相同的结果。
import ReactDOM from 'react-dom';
import {useEffect, useState} from 'react';
import './index.css';
const Test = () => {
const [message, setMessage] = useState("-");
const buttonClick = () => {
setMessage("Clicked");
}
useEffect(() => {
if(message !== "-") {
const id = setTimeout(() => {
console.log("Running Interval");
setMessage("-");
}, 1000);
return () => {
console.log("Clearing Interval");
clearTimeout(id);
}
}
}, [message]);
return (
<article>
<header>
{message}
</header>
<button onClick={buttonClick}>button</button>
</article>
);
}Stack Overflow用户
回答已采纳
发布于 2022-02-18 00:57:54
将超时ID放入ref中，然后可以在单击处理程序的开头调用clearTimeout。
const Test = () => {
const [message, setMessage] = React.useState("-");
const timeoutIdRef = React.useRef();
const handleClick = () => {
setMessage("Clicked");
clearTimeout(timeoutIdRef.current);
timeoutIdRef.current = setTimeout(() => {
setMessage("-");
}, 1000);
};
// cleanup, if desired
// React.useEffect(() => clearTimeout(timeoutIdRef.current), []);
return (
<article>
<header>
{message}
</header>
<button onClick={handleClick}>button</button>
</article>
);
}
ReactDOM.render(<Test />, document.querySelector('.react'));<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71167200
复制相关文章
相似问题
腾讯云开发者
