reactantd密码编辑组件

3次阅读

共计 4055 个字符,预计需要花费 11 分钟才能阅读完成。

之前的一篇文章里, 写过关于忘记密码这部分的业务, 今天这个主要是详细写密码编辑这一块功能, 需求也很明确, 考虑到密码未输入, 密码输入错误以及确认密码等情况, 代码里面会添加注释. 总结一点, 写 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>
        );
    }
}
正文完
 0