react+antd密码编辑组件

之前的一篇文章里,写过关于忘记密码这部分的业务,今天这个主要是详细写密码编辑这一块功能,需求也很明确,考虑到密码未输入,密码输入错误以及确认密码等情况,代码里面会添加注释.总结一点,写react组件概括就是封装函数,将函数调用到不同的生命周期钩子触发响应事件

`import React from 'react';`
`import message from 'antd/lib/message';`
import { View } from 'core';   //组件继承传值封装
import { Log, Toolkit } from 'util';  //工具封装

export default class EditPassWordView extends View {
    constructor(props) {
        super(props);
        this.state = {
            showSuccessWin: false,//密码修改成功提示框显示开关
            password: '',   //输入密码
            showError: false,   // 密码输入错误显示
            showError1: false,  // 新密码未输入错误显示
            showError2: false,  //新密码和确认密码输入错误显示
            errorMsg: '',   //错误信息
            newpassword: '',    //输入新密码
            surepassword: '',   //输入确认密码
        };
        this.validateCallBack = this.validateCallBack.bind(this);
        this.handleCloseWin = this.handleCloseWin.bind(this);
    }
    /*
     *检查旧密码是否正确
    */
    _checkPassword() {
        if (!this.state.password) {
            return false;
        }
        this.props.action.checkPassword({
            oldPassword: this.state.password,
            uid: this.props.uid, //找到唯一键值
        }).then((respData) => {
            if (respData.code === 0) {
                this.setState({
                    showError: false,
                });
            } else {
                this.setState({
                    showError: true,
                    showError1: false,
                    showError2: false,
                    errorMsg: respData.msg,
                });
            }
        }, (error) => {
            Log.error(error.reason);
        });
        return false;
    }
    /**
     * 校验密码强度回调函数
     * @param {*string} validateFlag 校验结果
     * @param {*string} errTips 错误提示语
     */
    validateCallBack(validateFlag, errTips) {
        // 校验失败
        if (!validateFlag) {
            this.setState({
                showError: false,
                showError2: false,
                showError1: true,
                errorMsg: errTips,
            });
        }
    }
    /*
     *修改密码
    */
    _editPassword() {
        const { password, newpassword, surepassword } = this.state;
        // if (!this.validatePassWord(password)) {
        //     return false;
        // }
        if (!password) {
            this.setState({
                showError: true,
                showError2: false,
                showError1: false,
                errorMsg: '请输入密码',
            });
            return false;
        }
        if (!Toolkit.validatePassWord(newpassword, this.validateCallBack)) {
            return false;
        }
        if (newpassword !== surepassword) {
            this.setState({
                showError2: true,
                showError: false,
                showError1: false,
                errorMsg: '两次密码输入不一致!',
            });
            return false;
        }

        const data = {
            oldPassword: password,
            newPassword: newpassword,
            uid: this.props.uid,
        };
        this.props.action.editPassword(data).then((respData) => {
            if (respData.code === 0) {
                this.setState({
                    showError2: false,
                    showSuccessWin: true,
                });
            } else {
                message.error(respData.msg || respData.reason);
            }
        }, (error) => {
            message.error(error.msg || error.reason);
            Log.error(error.reason);
        });
        return false;
    }
    /**
     * 关闭弹出框事件
     */
    handleCloseWin() {
        this.setState({
            showSuccessWin: false,
            password: '',
            newpassword: '',
            surepassword: '',
        });
    }
    /**
     * 渲染密码修改成功的提示弹出框
     */
    _renderPopWin() {
        const { showSuccessWin } = this.state;
        if (showSuccessWin) {
            return (
                <div className="stopPropa dyModal pop-win-box">
                    <div className="wrap">
                        <div className="dyModalBg" />
                        <div className="modalContent">
                            <div className="header">
                                <h3>提示</h3>
                                <i className="close-icon" onClick={this.handleCloseWin} />
                            </div>
                            <div className="content">
                                <div className="tips">
                                    <p style={{ fontWeight: 'bold' }}>密码修改成功</p>
                                    <p className="sub">请使用新密码重新登录一次</p>
                                </div>
                                <div className="btn-box">
                                    <a className="btn-sure" href={this.props.logoutUrl}>确定</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            );
        }
        return '';
    }
    _render() {
        return (
            <div>
                {this._renderPopWin()}
                <div className="change_password">
                    <h1>修改密码</h1>
                    <ul>
                        <li>
                            <span>原密码：</span>
                            <input
                                type="password"
                                name="password"
                                value={this.state.password}
                                onChange={(evt) => {
                                    this.setState({
                                        showError: false,
                                        showError2: false,
                                    });
                                    this.state.password = evt.target.value;
                                }}
                                onKeyUp={
                                    (evt) => {
                                        if (evt.keyCode === 13) {
                                            this._editPassword();
                                        }
                                    }
                                }
                            />
                            <strong
                                className="password"
                                style={{ display: this.state.showError ? 'block' : 'none' }}
                            >{this.state.errorMsg}</strong>
                        </li>
                        <li>
                            <span>新密码：</span>
                            <input
                                type="password"
                                name="newpassword"
                                value={this.state.newpassword}
                                onChange={(evt) => {
                                    this.setState({
                                        showError1: false,
                                        showError2: false,
                                    });
                                    this.state.newpassword = evt.target.value;
                                }}
                                onKeyUp={
                                    (evt) => {
                                        if (evt.keyCode === 13) {
                                            this._editPassword();
                                        }
                                    }
                                }
                            />
                            <strong
                                className="password"
                                style={{ display: this.state.showError1 ? 'block' : 'none' }}
                            >{this.state.errorMsg}</strong>
                        </li>
                        <li>
                            <span>确认密码：</span>
                            <input
                                type="password"
                                name="surepassword"
                                value={this.state.surepassword}
                                onChange={(evt) => {
                                    this.setState({
                                        showError2: false,
                                    });
                                    this.state.surepassword = evt.target.value;
                                }}
                                onKeyUp={
                                    (evt) => {
                                        if (evt.keyCode === 13) {
                                            this._editPassword();
                                        }
                                    }
                                }
                            />
                            <strong
                                className="password"
                                style={{ display: this.state.showError2 ? 'block' : 'none' }}
                            >{this.state.errorMsg}</strong>
                        </li>
                    </ul>
                    <button
                        onClick={this._editPassword.bind(this)}
                    >修改密码</button>
                </div>
            </div>
        );
    }
}