Log in Register react project code countdown, will not reset the page refresh

　　When present, many websites and app landing registration will be used to do phone verification code, verification code in order to prevent the bombing, which is free to click on the verification code, in general we need to get a verification code restrictions, most commonly used in the provision time shall not be sent repeatedly.

　　Countdown is simple to achieve, a timer may be provided, within the time provided to add acquisition button codes disabled = true attribute, the user can avoid repetitive clicks. However, if the user refreshes the page it? Here's to record what my solution.

　　jsx Code

<p>
      <i className="iconfont icon-yanzhengma"></i>
      <Input type = "text" placeholder = "Please enter PIN" onChange = {this.check.bind (this)} />
      <button className="checkBtn" disabled={ this.state.flag }  onClick={ this.getCheck.bind(this) }>{ this.state.text }</button>
</p>
                  

　　Set the initial state

this.state = {
      _dura: 0,
      text: 'Click for Code'
      flag: false
}

　　Click for Code event, where I used the react-cookies-install components you want to go to rely cnpm i react-cookies -S

 // Get the phone code
  getCheck () {
    let tel = this.state.tel
    // console.log(tel)
    if (tel.length !== 0) {
      getCheck(tel).then(data => {
        // set a cookie to save time
        cookie.save('sendCode', 60, 60);
        // console.log(data)
        this.setState({
          codeNum: data.data.data, // save the random verification code, the latter used to verify
          flag: true
        })
        this.sendCode();
      })
    } else {
      Toast.fail ( 'Please enter a phone number', 1);
    }
  }

　　Package sendCode (), in order to process the page refreshes, the countdown is cleared, we can send a verification code to set a time, there is a cookie inside, and set a timer, updated once per second cookie data, and synchronize the countdown, the next time the page is loaded, the time to judge whether the cookie is 0;

// determine whether there is a cookie countdown
  sendCode () {
    console.log(111)
    this.setState({
      flag: true
    })
    let _dura = cookie.load('sendCode');
    let timer = setInterval(() => {
      console.log(this)
      _dura--;
      let text = 'retrieve' + '(' + _dura + ')';
      this.setState({
        _dura,
        text
      })
      cookie.save('sendCode', _dura, _dura)
      if (_dura === 0) {
        text = 'Click for Code';
        this.setState({
          text,
          flag: false
        })
        clearInterval(timer);
        h = null;
        cookie.remove('sendCode');
      }
    },1000)
  }

　　In the life cycle of the function hook function componentDidMount (), call, every time the page refreshes are determining whether there is a countdown

componentDidMount () {
    if (cookie.load('sendCode')) {
      this.sendCode();
    }
  }

　　Note, sendCode () function, you need to call in two places, the first is to send a verification code when successful, the second is in the life cycle of the hook function.

　　These are personal opinions when writing some of the project and, if wrong place, welcome that.