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

package.json添加：

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

npm install
webpack
webpack-dev-server

/**
* 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;