react-app-shell
Version:
react打包脚本和example, 这里的版本请忽略
86 lines (74 loc) • 2.57 kB
JavaScript
import React, {PureComponent} from 'react';
import {BaseModal} from '../modal';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import styles from './security.less';
export default class SecurityCode extends PureComponent {
static propTypes = {
loading: PropTypes.bool,
onOk: PropTypes.func,
onCancel: PropTypes.func,
};
static defaultProps = {
loading: false,
onCancel: () => {
console.log('您点击了取消');
}
};
state = {
captchaCode: ''
}
componentDidMount() {
this.handleRefreshCode();
}
handleonCancel = () => {
let {onCancel} = this.props;
onCancel && onCancel();
};
handleonOk = () => {
const {captchaCode} = this.state;
if (captchaCode.length < 4) {
return false;
}
let {onOk, onCancel, loading} = this.props;
if (loading) return false;
onOk ? onOk(captchaCode) : onCancel();
};
handleInputChange = (key, e) => {
this.setState({
[key]: e.target.value
});
};
handleRefreshCode = () => {
this.refs.captchaImg.src = '/captcha/get?t=' + Math.random();
};
render() {
let {captchaCode} = this.state;
return <BaseModal modalType={'edit'}
onCancel={this.handleonCancel}
footer={<div className={styles['footer']}>
<button className={styles['cancelBtn']} onClick={this.handleonCancel}>取消</button>
<button className={styles['okBtn']} onClick={this.handleonOk}>确认</button>
</div>}>
<div className={styles['form']}>
<div className={classNames(styles['form-item'], 'clearfix')}>
<div className={styles['captcha-input']}>
<input placeholder="请输入图片验证码"
onChange={this.handleInputChange.bind(this, 'captchaCode')}
maxLength="4"
value={captchaCode}
/>
</div>
<div className={styles['captchaImg']} onClick={this.handleRefreshCode}>
<img
src={''}
ref="captchaImg"
alt=""
/>
<p>看不清?换一张</p>
</div>
</div>
</div>
</BaseModal>;
}
}