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>
        );
    }
}