@antdp/antdp-ui/esm/InputCount/index.js

基于antd封装的组件

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["onSend", "buttonProps", "countTime"];
import React, { Fragment, useState, useEffect } from 'react';
import { Input, Button } from 'antd';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var InputCount = props => {
  var {
      onSend,
      buttonProps,
      countTime
    } = props,
    others = _objectWithoutPropertiesLoose(props, _excluded);
  // 默认倒计时时间
  var DEFAULT_TIME = countTime ? countTime : 60;
  var [time, setTime] = useState(DEFAULT_TIME);
  var [loading, setLoading] = useState(false);
  useEffect(() => {
    var timer = 0;
    if (loading && time != 0) {
      timer = setInterval(() => {
        // 这时候的time由于闭包的原因，一直是0，所以这里不能用setNum(num-1)
        setTime(n => {
          if (n == 1) {
            setLoading(false);
            clearInterval(timer);
          }
          return n - 1;
        });
      }, 1000);
    }
    return () => {
      // 组件销毁时，清除定时器
      clearInterval(timer);
    };
  }, [loading]);

  //短信验证
  var send = e => {
    setTime(DEFAULT_TIME);
    setLoading(true);
    // 点击发送按钮,回调调用接口
    onSend && onSend();
    e.preventDefault();
  };
  return /*#__PURE__*/_jsx(Fragment, {
    children: /*#__PURE__*/_jsxs("div", {
      style: {
        display: 'flex',
        alignItems: 'center'
      },
      children: [/*#__PURE__*/_jsx(Input, _extends({
        style: {
          flex: 1,
          transition: 'width .3s',
          marginRight: 8
        }
      }, others)), /*#__PURE__*/_jsx(Button, _extends({
        style: {
          display: 'block'
        },
        size: "middle",
        type: "primary",
        loading: loading,
        onClick: send.bind(this)
      }, buttonProps, {
        children: loading ? time + '秒' : '发送验证'
      }))]
    })
  });
};
export default InputCount;