碰到过好多次业务中有发送验证码的需求,然后总有一个避不开的小问题,就是点击发送验证码后,按钮需置灰一段时间(一般是倒计时 60s),然后才可以再次点击。
这当然很简单,按钮组件中加一个名为 time
的 state,初始值为 0,然后点击的时候把这个值置为 60,然后每秒 -1。
最后把按钮 disabled
属性绑定到这个 time
,time
大于 0 时按钮禁用,time
等于 0 时,按钮可用。
但是这样有一个问题时如果用户刷新页面之后,这个 state 状态就丢失了,然后前端上这个按钮就又可以点击了。所以我们需要把这个状态持久化记录下来。
无非两种方案,存到 sessionStorage
里面,或者 localStorage
里面。
今天上午公司网络故障,顺手把这个极小但是很常见的需求封装了一下,发布了一个名为 @minax/countdown
的 npm 包。
npm install --save @minax/countdown
import { useCountDown, CountDownProvider } from '@minax/countdown'
暴露了 useCountDown
和 CountDownProvider
两个方法,需要注意地是,useCountDown
为 React@16.8+ 才有的 Hooks 语法。所以需要保证你的 React 版本大于 16.8,CountDownProvider
其实就是基于 useCountDown
包装了一下(悄悄地说,本来不准备封装的,毕竟有了 Hooks 以后我就没写过 Class 组件了),这样就能在 Class 类型组件中使用了。
使用方法在 README 文件里面写的很详细了,还有在线 Demo,有需求的小伙伴自取。