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