react+antd封装组件完成忘记密码验证账号功能

需求还是很常见的,比如任何网站带有账号登录注册功能,忘记密码这种情况还是非常常见的,需求都是一步步来完成,没有人能够一口气把业务代码完全写出来,顺序是:验证账号信息,再次发送邮件

import message from 'antd/lib/message';  //antd消息组件
import '../../../styles/toast.scss';  //样式

import { Log, Iterator, Device } from 'util';  //判断设备兼容

export default class IndexView extends View {
    constructor(props) {
        super(props);
        this.state = {
            currentIndex: 1,    // 忘记密码当前处于第几步
            usernameVal: '',   // 用户输入账号
            email: '',
            username: '',
        };
    }

    /*
    * 验证账号信息
    */
    _sureEmail() {
        const usernameVal = this.state.usernameVal;
        if (!usernameVal) {
            message.error('请输入账号进行验证');
            return;
        }
        this.props.action.checkEmail({
            username: usernameVal,
        }).then((respData) => {
            if (respData.code === 0) {
                Log.debug('账号验证通过');
                this.state.email = respData.data && respData.data.email;
                this.state.username = respData.data && respData.data.username;
                this.setState({
                    currentIndex: 2,
                });
            } else {
                message.error(respData.msg || respData.reason);
            }
        }, (error) => {
            Log.error(error.reason);
        });
    }

    /*
    * 再次发送邮件
    */
    _sendAngin() {
        this.props.action.checkEmail({
            username: this.state.username,
        }).then((respData) => {
            if (respData.code === 0) {
                message.error('已重新发送邮件至验证邮箱');
            } else {
                message.error(respData.msg || respData.reason);
            }
        }, (error) => {
            Log.error(error.reason);
        });
    }
    /*
    * 兼容ie
    */
    _clearValue() {
        const inputs = document.querySelectorAll('input[type=text]');
        Iterator.each(inputs, (item) => {
            item.value = '';
        });
    }
    componentDidMount() {
        if (Device.isIE()) {
            setTimeout(this._clearValue, 200);
        }
    }
    _render() {
        return (
            

                

                    
                    
门户管理平台-忘记密码
                
                

           
                    

                        

                            

                                1
                                确认账号
                            
                            

                                2
                                验证邮箱
                            
                        
                        {
                            this.state.currentIndex === 1 ?
                                

                                    

                                        请填写您需要找回的账号
                                         {
                                                    this.state.usernameVal = e.target.value;
                                                }
                                            }
                                            onKeyUp={
                                                (evt) => {
                                                    if (evt.keyCode === 13) {
                                                        this._sureEmail();
                                                    }
                                                }
                                            }
                                        />
                                    
                                    下一步
                                
 :
                                

                                    

                                        
                                    
                                    

                                        
{`验证邮件已发送账号设置邮箱 ${this.state.email}`} 
                                        
请您注意接收邮件
                                    
                                     {
                                                window.open('https://exmail.qq.com/login');
                                            }
                                        }
                                    >前往验证
                                    
请注意查收邮件，并按照邮件中的提示操作没有收到邮件？
                                        重新发送
                                
                        }
                    
                
            
        );
    }
}