zoukankan      html  css  js  c++  java
  • React中发送验证码,倒计时

    render () {

      return (

        <label>验 证 码:</label>

        <div className="flexBetween">
          <Input type="text" className="code-input" value={code} onChange={this.onChange.bind(this, 'code')} placeholder="请输入" autoComplete="off" />
          <Button type="primary" className="code-btn" onClick={this.onChange.bind(this, 'sendCode')}>
            { isSend ? count + 's' : '发送验证码'}
          </Button>
        </div>

      )

    }

    this.state = {

      isSend: false,

      count: 60,

    }

    onChange(key, value) {
      const { tell } = this.state
      if (key === 'sendCode') {
        this.setInterval()
      }
    }

    setInterval = () => {
      this.timer = setInterval(this.countDown, 1000)
    }
     
    countDown = () => {
      const { count } = this.state
      if (count === 1) {
        this.clearInterval()
        this.setState({ isSend: false, count: 60 })
      } else {
        this.setState({ isSend: true, count: count - 1 })
      }
    }
     
    clearInterval = () => {
      clearInterval(this.timer)
    }
  • 相关阅读:
    21班考试总结
    性别
    2019.08.20上课笔记2
    2019.08.20上课笔记3
    2019.08.20上课笔记1
    单词2
    数据类和运算符
    2019.08.14单词1
    2019.08.14上课笔记1
    request.get... getHeader 能取得的信息 参数
  • 原文地址:https://www.cnblogs.com/qianxiaoniantianxin/p/14777026.html
Copyright © 2011-2022 走看看