前端生成二维码并弹出框显示（React）

1.简单的安装、引入、使用。

//安装
npm install qrcode.react --save
 
//引入
import QRCode  from 'qrcode.react';
 
 
//使用 
<QRCode
      value={content}  //生成二维码的内容
      size={256} //二维码尺寸
      fgColor="#000000"  //二维码颜色
 />

2.如何利用弹出框显示

这里我们使用ant design框架

import { Modal } from 'antd';//引入Modal

初始化一个状态，初始值为false，原理就是视觉上的隐藏和显示。

this.state = {
    qrCodeStr:"我是一个小二维码",
    isModalOpen:false
}



//显示
showQRcode = ()=>{
	this.setState({
		isModalOpen: true
	})
}
//隐藏
hiddenModal = ()=>{
		this.setState({
		    isModalOpen: false
		})
	}

//渲染组件
<button onClick={e=>this.showQRcode()}>生成二维码</button>



//重点
<Modal title="二维码" visible={this.state.isModalOpen}  footer={[]} onCancel={this.hiddenModal}>
    <div style={{width:'300px',height:'300px',margin:'0 auto'}}>
		<QRCode value={this.state.qrCodeStr} size={256} id="qrCode" />
	</div>
</Modal>

这里基本就可以实现了

注意：

1.二维码的内容qrCodeStr可以再state中写死，也可以动态获取（扫描结果就是文字内容）

如果动态获取，点击button时

需要传参就需要使用箭头函数onClick={e=>this.showQRcode("参数")}

如果直接写函数名机会立即执行

2.修改state值时，如果写成this.state.xxx = xxx，会有很大延时，不能即时响应，还是得用

thia.setState({})

3.扫描二维码后，点击右上角x图标关闭，不需要组件自带的“取消”和“确定”，可以在Modal标签内写footer={[]}，内容是个空数组，就不会显示了，也可以自定义其他按钮标签。