React實戰之60s倒計時按鈕（發送短信驗證按鈕）

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: '***/***', 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>
　　);
}
 
 

 

 

代碼就這樣了！

 

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