倒计时组件,适用场景为点击获取验证码

倒计时组件,适用场景为点击获取验证码

JavaScript 其它杂项

详细介绍

React Codedown Clock

A simple countdown clock as a React component use typescript.

Installation

npm install react-codedown --save

Usage

import * as React from 'react'
import CountDown from 'react-codedown'

class App extends from React.Component {

    delay = (time) => new Promise((resolve, reject) => {
        setTimeout(resolve, time)
    })

    handleClick = async () => {
        await this.delay(3000)
        this.countdown.reset()
    }

    render(){
        return (    
            <CountDown 
                initialRemaining={60}
                initialContent="获取验证码"
                style={{ width: 80, height: 40 }}
                className="myClass"
                onClick={this.handleClick}
                ref={ref => this.countdown = ref}
                interval={1000}
            />
        )
    }
}

Props

prop type default description
initialRemaining number 60 倒计时时间
initialContent string 获取验证码 按钮初始文本
style object - 按钮内联样式
className string - 按钮类名
disabledClass string - 按钮禁用时类名
onClick function - 点击触发的函数
interval number 1000 时间间隔

methods

start
开始倒计时

reset
重置倒计时