react 生成二维码、黏贴url到粘贴板

  1. 安装qrcode.react、react-copy-to-clipboard
import QRCode from 'qrcode.react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
  1. 生成二维码
let renderQrCode = () => {
            const { qrcodeVisible, qrUrl } = this.state;
            return (
                <NCModal
                    show={qrcodeVisible}
                    onHide={this.onCloseQrModal}
                    size="md"
                    backdropClosable="true"
                    backdrop="true"
                    className="wps-preview-model"
                    minWidth="250"
                    minHeight="300">
                    <ModalHeader
                        closeButton={true}>
                        <span>二维码</span>
                    </ModalHeader>
                    <ModalBody style={{ clear:'both' }}>
                        <div style={{float:'left',width:'60%'}}>
                            <QRCode
                                id='qrCode'
                                value={qrUrl}
                                size={200}
                                style={{ margin: 'auto' }}/>
                        </div>
                        <div style={{float:'left',width:'40%'}}>
                            <span>二维码内容</span>
                        </div>
                    </ModalBody>
                    <ModalFooter>
                        <NCButton onClick={this.onCloseQrModal}>
                            关闭
                        </NCButton>
                        <a id='qrLink' className='u-button  nc-button-wrapper button-weishabushezhiyigemoren ' onClick={this.downQrCode}>下载</a>
                        <CopyToClipboard text={qrUrl}
                            onCopy={() => toast({ color: 'success', content: '复制成功' })}>
                                <a className='u-button  nc-button-wrapper button-weishabushezhiyigemoren ' onClick={this.downQrCode}>复制链接</a>
                        </CopyToClipboard>
                    </ModalFooter>
                </NCModal>
            );
        }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容