react-验证码倒计时组件

react-验证码倒计时组件

React 其它杂项

访问GitHub主页

共11Star

详细介绍

react-sk-countdown

##这是什么(What is it) 这是为react提供的一个验证码倒计时的组件

##如何使用(How to use it)

  1. npm install react-sk-countdown@latest --save
var React =require('react')

var {CountDownText} = require('react-sk-countdown');
export default class MyIntergral extends React.Component {
  constructor(props) {
      super(props)
      this.state = {
          countingDone:false,
      }
  }
  
  _sendVerifyCode(){
    this.setState({
      countingDone:false
    })
  }
  render() {
     var styleObj = {
            color:"#fff",
            fontSize:16,
            fontWeight:"normal",
            textAlign:"center",
            margin:'0 auto',
            background:"#ee735c",
            width:120,
            height:40,
            lineHeight:'40px',
            marginTop:10,
        } 
    return (
        <div>
         
              {
                this.state.countingDone
                ?<p style={styleObj} onClick={this._sendVerifyCode.bind(this)}>获取验证码</p>
                : <CountDownText
                style={styleObj}
                countType='seconds' // 计时类型:seconds / date 
                auto={true} // 自动开始 
                afterEnd={() => {this.setState({
                  countingDone:true
                })}} // 结束回调
                timeLeft={5} // 正向计时 时间起点为0秒 
                step={-1} // 计时步长,以秒为单位,正数则为正计时,负数为倒计时 
                startText='获取验证码' // 开始的文本 
                endText='获取验证码' // 结束的文本 
                intervalText={(sec) => sec + '秒重新获取'} // 定时的文本回调 
                />
              }
        </div>
    )
  }
}