react hooks 封装短信验证码倒计时

用原生js写短信验证码倒计时可能和react的hooks不一样，这里封装一个通用的react短信验证码倒计时hook插件。

代码如下:

/**
 * 短信验证码倒计时钩子
 * @param formatter: function|undefined
 */
const useSmsCodeCountdown = (opt) => {
  const { formatter } = opt || {};

  // 倒计时值
  const [countdown, setCountdown] = useState(0);
  // 倒计时的实例
  const [timer, setTimer] = useState(null);

  // 默认的格式化文本
  const defaultFormatter = (num) => {
    if (num) return `重新获取(${num}s)`;
    return '获取验证码';
  };

  // 运行方法
  const runHandle = (num) => {
    // 设置倒计时值
    setCountdown(num);
    // 清除倒计时的实例
    clearTimeout(timer);
    if (num > 0) setTimer(setTimeout(() => runHandle(num - 1), 1000));
  };

  const formatText = typeof formatter === 'function' ? formatter(countdown) : defaultFormatter(countdown);
  return [{ countdown, disabled: countdown > 0, formatText }, runHandle];
};

使用：

const TestSmsCodeCountdown = () => {
  const [{ disabled, formatText }, run] = useSmsCodeCountdown();

  const onClickHandle = () => {
    // 获取短信验证码(60s)
    run(60);
  };

  return (
    <button type="button" disabled={disabled} onClick={onClickHandle}>{formatText}</button>
  );
};