UNPKG

react-app-shell

Version:

react打包脚本和example, 这里的版本请忽略

86 lines (74 loc) 2.57 kB
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>; } }