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>