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