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 (
            <div className="login_wrap">
                <div className="login_header login_comwidth">
                    <img alt="logo" src="../static/img/dy_logo.png" />
                    <h1>门户管理平台-忘记密码</h1>
                </div>
                <div className="login_content">

                    <div className="border_box forgot_content">
                        <ul className="forgot_tab clearfix">
                            <li
                                className={`sure_email${this.state.currentIndex === 1 ? ' active' : ''}`}
                            >
                                <i>1</i>
                                <span>确认账号</span>
                            </li>
                            <li
                                className={`check_email${this.state.currentIndex === 2 ? ' active' : ''}`}
                            >
                                <i>2</i>
                                <span>验证邮箱</span>
                            </li>
                        </ul>
                        {
                            this.state.currentIndex === 1 ?
                                <div className="sure_email_content">
                                    <div className="email">
                                        <span>请填写您需要找回的账号</span>
                                        <input
                                            type="text"
                                            onChange={
                                                (e) => {
                                                    this.state.usernameVal = e.target.value;
                                                }
                                            }
                                            onKeyUp={
                                                (evt) => {
                                                    if (evt.keyCode === 13) {
                                                        this._sureEmail();
                                                    }
                                                }
                                            }
                                        />
                                    </div>
                                    <button
                                        className="next"
                                        onClick={this._sureEmail.bind(this)}
                                    >下一步</button>
                                </div> :
                                <div className="check_email_content">
                                    <div className="email_icon">
                                        <img src="../static/img/email.png" alt="email" />
                                    </div>
                                    <div className="email_text">
                                        <p>{`验证邮件已发送账号设置邮箱 ${this.state.email}`} </p>
                                        <p>请您注意<span>接收邮件</span></p>
                                    </div>
                                    <button
                                        className="go_check"
                                        onClick={
                                            () => {
                                                window.open('https://exmail.qq.com/login');
                                            }
                                        }
                                    >前往验证</button>
                                    <p className="email_tip">请注意查收邮件，并按照邮件中的提示操作没有收到邮件？
                                        <span
                                            onClick={this._sendAngin.bind(this)}
                                        >重新发送</span></p>
                                </div>
                        }
                    </div>
                </div>
            </div>
        );
    }
}