React Js 生成二维码 插件 qrcode.react

1. qrcode 是一个js插件，具体可以github，这边不多介绍。
2. qrcode.react这个是修改为React的一个插件。
3. 具体是生成二维码的原理是什么，这边也不多做介绍。

下面介绍如何使用，或封装。

package.json添加：

"qrcode.react": "^0.6.1",
"copy-to-clipboard": "^3.0.5"

npm install 
webpack
webpack-dev-server

下面代码第一个注释，是指QRcode组件如何使用，第二个注释是介绍这个封装后的组件如何使用。相信大家都看得懂。这边用了antd，如果不需要，请自行删除。复制插件我的博客有介绍，大家自行翻阅。

/**
 * Created by wuyakun on 2017/3/23.
 * 二维码
 *
 * eg:<QRCode value="http://facebook.github.io/react/" />
 *
 prop    type    default value
 value    string
 size    number    128
 bgColor    string (CSS color)    "#FFFFFF"
 fgColor    string (CSS color)    "#000000"
 level    string ('L' 'M' 'Q' 'H')    'L'
 */

import {Input, message, Modal, Icon} from 'antd';
import React from 'react';
const QRCode = require('qrcode.react');
import copy from 'copy-to-clipboard';

/**
 * 二维码
 <QRCodeModal
 url={this.state.qrcodeURL}
 ref="modal"
 size={150}/>
 */

class QRCodeModal extends React.Component {

    constructor() {
        super();
        this.state = {
            visible: false,
            url: '',
            size: 150,
        };
    }

    showModal = () => {
        this.setState({
            visible: true,
            url: this.props.url,
            size: this.props.size,
        });
    };

    handleOk = () => {
        this.setState({
            visible: false
        });
    };

    handleCancel = () => {
        this.setState({
            visible: false,
        });
    };

    copyUrl = () => {
        try {
            //const url = this.refs.url;
            // url.select();
            // document.execCommand('Copy');
            copy(this.props.url);
        } catch (e) {
            console.log(e);
        }
        message.success('复制成功，如果失败，请在输入框内手动复制.');
    };

    render() {
        return (
            <div >
                <Modal title='活动链接'
                       width={500}
                       visible={this.state.visible}
                       onOk={this.handleOk}
                       onCancel={this.handleCancel}
                       footer="">

                    <div style={{float: 'left', width: this.props.size}}>
                        <QRCode
                            size={this.state.size}
                            value={this.state.url}/>

                        <div style={{textAlign: 'center', marginTop: 10}}>
                            微信扫一扫
                        </div>
                    </div>

                    <div style={{width: 300, float: 'right'}}>
                        <div >
                            <span>
                                链接地址
                            </span>

                            <div style={{marginTop: 10, marginBottom: 10}}>
                                <Input
                                    ref='url'
                                    addonAfter={<Icon type="copy" onClick={this.copyUrl}/>}
                                    value={this.props.url}/>
                            </div>
                            <span>
                                可将链接复制到您的公众号菜单中
                            </span>
                        </div>
                    </div>

                    <div style={{clear: 'both'}}>
                    </div>

                </Modal>
            </div>
        );
    }
}

export default QRCodeModal;