React 60s倒计时(发送短信验证按钮)

Posted yu-shuai

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React 60s倒计时(发送短信验证按钮)相关的知识,希望对你有一定的参考价值。

导入:(antd组件——Form表单

import { Button, Form, Input } from ‘antd‘;
const FormItem = Form.Item;
 
state = {
  loading: false,
  yztime: 59,
};
 
//倒计60s
count = () => {
  let { yztime } = this.state;
  let siv = setInterval(() => {
    this.setState({ yztime: (yztime--) }, () => {
      if (yztime <= -1) {
        clearInterval(siv);  //倒计时( setInterval() 函数会每秒执行一次函数),用 clearInterval() 来停止执行:
        this.setState({ loading: false, yztime: 59 })
      }
    });
  }, 1000);
}
 
//短信验证
verifiedSubmit = (e) => {
  this.setState({ loading: true });
  e.preventDefault();
  this.props.form.validateFields((err, values) => {
    if (!this.state.yztime == 0) {
      this.count();
    }
    let verify = { phone: values.accountname, gettype: 1 }
    this.props.dispatch({ type: ‘login/verify‘, payload: { verify } });
  });
}
 
render() {
  const { form: { getFieldDecorator } } = this.props;
  return (
    <Form>
      <FormItem>
        {getFieldDecorator(‘yzm‘, {
          rules: [{ required: false, message: ‘请输入验证码!‘ }],
        })(<Input placeholder="请输入验证码" />
        )}
        <Button loading={this.state.loading} htmlType="submit" onClick={this.verifiedSubmit}>
        {this.state.loading ? this.state.yztime + ‘秒‘ : ‘发送验证‘}
        </Button>
      </FormItem>
    </Form>
  );
}
 
 
 
代码就这样了!
小生的第一篇博客,如有不足之处,还望多多指教

以上是关于React 60s倒计时(发送短信验证按钮)的主要内容,如果未能解决你的问题,请参考以下文章

发送短信验证,后按钮倒计时,防止刷新倒计时失效

超实用的JavaScript代码段 Item4 --发送短信验证码

jq实现发送验证码倒计时60s

用JavaScript写一个简单的倒计时,可以应用在发送短信验证码的“59秒后重新发送验证短信”

实现发送短信验证码后60秒倒计时

防止恶意攻击短信验证码接口方法