之前的一篇文章里,写过关于忘记密码这部分的业务,今天这个主要是详细写密码编辑这一块功能,需求也很明确,考虑到密码未输入,密码输入错误以及确认密码等情况,代码里面会添加注释.总结一点,写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 (
提示
密码修改成功
请使用新密码重新登录一次
);
}
return '';
}
_render() {
return (
{this._renderPopWin()}
修改密码
-
原密码：
{
this.setState({
showError: false,
showError2: false,
});
this.state.password = evt.target.value;
}}
onKeyUp={
(evt) => {
if (evt.keyCode === 13) {
this._editPassword();
}
}
}
/>
{this.state.errorMsg}
-
新密码：
{
this.setState({
showError1: false,
showError2: false,
});
this.state.newpassword = evt.target.value;
}}
onKeyUp={
(evt) => {
if (evt.keyCode === 13) {
this._editPassword();
}
}
}
/>
{this.state.errorMsg}
-
确认密码：
{
this.setState({
showError2: false,
});
this.state.surepassword = evt.target.value;
}}
onKeyUp={
(evt) => {
if (evt.keyCode === 13) {
this._editPassword();
}
}
}
/>
{this.state.errorMsg}
);
}
}