react-app-shell/activity/src/components/security/index.js

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

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>;
    }
}