标签：count 倒计时 isSend setInterval clearInterval 60 验证码 React state

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) }

标签：count,倒计时,isSend,setInterval,clearInterval,60,验证码,React,state
来源： https://www.cnblogs.com/qianxiaoniantianxin/p/14777026.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。