React实战之60s倒计时按钮（发送短信验证按钮）

React实战之60s倒计时按钮——短信验证按钮

导入：（antd组件——Form表单）

 import { Button, Form, Input } from 'antd';
 const FormItem = Form.Item;

 state = {
 　　loading: false,
 　　yztime: ,
 };

 //倒计60s
 count = () => {
 　　let { yztime } = this.state;
 　　let siv = setInterval(() => {
 　　　　this.setState({ yztime: (yztime--) }, () => {
 　　　　　　if (yztime <= -) {
 　　　　　　　　clearInterval(siv);　　//倒计时( setInterval() 函数会每秒执行一次函数)，用 clearInterval() 来停止执行:
 　　　　　　　　this.setState({ loading: false, yztime:  })
 　　　　　　}
 　　　　});
 　　}, );
 }

 //短信验证
 verifiedSubmit = (e) => {
 　　this.setState({ loading: true });
 　　e.preventDefault();
 　　this.props.form.validateFields((err, values) => {
 　　　　if (!this.state.yztime == ) {
 　　　　　　this.count();
 　　　　}
 　　　　let verify = { phone: values.accountname, gettype:  }
 　　　　this.props.dispatch({ type: '***/***', 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>
 　　);
 }

 

代码就这样了！

 

小生的第一篇博客，如有不足之处，还望多多指教