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