등록에 로그인 페이지 새로 고침을 재설정하지 않습니다, 프로젝트 코드 카운트 다운 반응

　　현재, 많은 웹 사이트와 응용 프로그램 착륙 등록이 확인 코드 제한을 얻기 위해 일반적으로 우리의 필요, 확인 코드를 클릭 자유롭게 폭탄 테러를 방지하기 위해 전화 확인 번호, 확인 코드를 수행하는 데 사용됩니다 때, 가장 많이 제공에 사용 시간이 반복적으로 전송 할 수 없다.

　　카운트 다운 시간을 사용자가 클릭 반복을 피할 수 취득 버튼 코드 중지 = TRUE 특성을 추가하기 위해 제공 내에 타이머가 제공 될 수있다 달성하기 쉽다. 그러나 사용자 새로 고침 페이지 그것을 경우? 여기에 무엇을 내 솔루션을 기록 할 수 있습니다.

　　jsx 코드

<p> 
      <I 클래스 명 = "iconfont 아이콘-yanzhengma"> </ I> 
      <input 타입 = "텍스트"자리 = "请输入验证码"의 onChange this.check.bind = {(본)} /> 
      <버튼 클래스 이름 = "checkBtn"비활성 this.state.flag = {} = {this.getCheck.bind 온 클릭 (이)}> {this.state.text} </ 버튼> 
</ p>
                  

　　초기 상태를 설정

= {this.state 
      _dura : 0, 
      텍스트 : '코드를 보려면 클릭' 
      에서 신고 : false로 
}

　　난 당신이 내가 반응-쿠키를 cnpm 의존 가고 싶은 구성 요소를 설치 반응-쿠키를 사용하는 코드 이벤트에 대한 클릭 -S

// 전화 코드 받기 
  GetCheck () { 
    송출 전화 = this.state.tel 
    //을 console.log (전화) 
    IF (tel.length를! == 0) { 
      GetCheck (전화) 그 때는 (데이터 => { 
        // 쿠키 저장 시간 설정 
        , cookie.save ( 'sendCode', 60, 60) 
        CONSOLE.LOG (데이터) // 
        this.setState ({ 
          data.data.data // 랜덤 코드 저장 후자 확인 : code_num으로는 
          플래그 : true로 
        )} 
        ) (this.sendCode; 
      }) 
    } {다른 
      Toast.fail ( "전화 번호 ', 1)을 입력하세요; 
    } 
  }

　　패키지 sendCode는 (), 페이지가 새로 고쳐을 처리하기 위해, 카운트 다운을 취소, 우리는 시간을 설정하여 인증 코드를 보낼 수있을 쿠키 내부이고, 두 번째 쿠키 데이터에 한 번 업데이트 타이머를 설정하고 카운트 다운을 동기화, 쿠키가 0인지 페이지가로드 될 다음 번에, 시간이 판단하기;

// 카운트 다운 쿠키가 있는지 여부를 판단 
  sendCode () { 
    CONSOLE.LOG (111) 
    ({this.setState 
      : 참으로 플래그 
    }) 
    ; 송출 _dura = cookie.load ( 'sendCode') 
    상기 setInterval을 타이머 = (() => {하자 
      을 console.log합니다 (이) 
      _dura--, 
      송출 텍스트 = '('+ + _dura ')'+ '검색'; 
      this.setState ({ 
        _dura, 
        텍스트 
      }) 
      cookie.save ( 'sendCode', _dura, _dura) 
      IF (_dura === 0) { 
        텍스트 = '코드를 클릭'; 
        this.setState ({ 
          텍스트 
          에서 플래그 : false로 
        }) 
        사항 clearInterval (타이머);
        H = NULL;
        ( 'sendCode')를 cookie.remove; 
      } 
    } 1000) 
  }

　　함수 후크 기능 componentDidMount (), 호출, 페이지가 새로 고쳐 카운트 다운이 있는지 여부를 결정 때마다의 수명주기에서

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

　　참고 sendCode () 함수는, 당신은 먼저 성공이, 두 번째는 후크 함수의 라이프 사이클에있을 때 인증 코드를 전송하는 것입니다, 두 곳에서 호출해야합니다.

　　다음은 잘못된 장소 경우, 그 환영 개인 프로젝트의 일부를 작성하는 의견이다.