react 按钮倒计时5秒之后可进行点击操作

60 阅读 0 评论 40 点赞

我是靠谱客的博主悲凉缘分，最近开发中收集的这篇文章主要介绍react 按钮倒计时5秒之后可进行点击操作，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

需求：h5 按钮交互倒计时5秒钟之后显示“下一步”操作，并且在5秒内按钮被禁止操作

1.定义初始值,使用useSafeState
它的用法与 React.useState 完全一样，但是在组件卸载后异步回调内的 setState 不再执行，避免因组件卸载后更新状态而导致的内存泄漏。

const [state,setState]=useSafeState(5)

2.定时器方法

useEffect(()=> {
    let timers = 5
     setInterval(() => {
       const num= timers --
       setState(num)
       if (num < 0) {
         clearInterval(num)
         setState('下一步')
       }
     }, 1000)
  },[])

3.渲染

<Button
   className='view-btn'
   disabled={state!=="下一步"? true: false} // true 禁止点击
   onClick={()=>console.log('点击事件')}
   plain={state!=="下一步"? true : false} 
>
   {state}
</Button>