58,424 讀數

如何在 React 中构建二维码生成器

经过 Teri8m2022/07/01

太長; 讀書

创建快速响应 (QR) 代码生成器的想法是将数据从图像转换为文本。二维码只是将图像数据表示为文本，它有很多有用的应用，从餐厅菜单和音乐会门票，到在线日历邀请、支付等等。

Company Mentioned

在本教程中，您将学习如何使用 JavaScript 库 React 创建二维码。使用 React 的好处是它使构建前端应用程序变得轻而易举，因为它为开发人员提供了重用组件的方法。

要完成本教程，将涵盖以下内容：

先决条件
入门
创建二维码生成器
样式化 QR 码应用程序
下载生成的二维码
结论
资源

演示

先决条件

要完成本教程，您需要以下内容：

对 React.js 的基本了解

安装在本地机器上

入门

在编写一行代码之前，打开终端并运行以下命令：

 npx create-react-app qrcode-generator

上面的命令搭建了文件并安装了一些创建 React 应用程序所需的包。

接下来，导航到项目目录并运行可访问的开发服务器

//localhost:3000

使用以下命令在浏览器中预览应用程序：

 cd qrcode-generator npm start

最后，让我们安装创建二维码生成器所需的依赖库。运行命令：

 npm install qrcode.react

 qrcode.react

: 一个 React 组件，用于生成 QR 码以渲染到 DOM。

创建二维码生成器

到目前为止的工作很棒！

QR 码生成器的创建将从创建包含 QR 码结构的文件和组件开始。在 src 目录中，创建一个名为 components 的文件夹，并在该文件夹中创建一个名为 QrCode.js 的文件。

复制并粘贴以下代码：

 // src/components/QrCode.js
import { useState } from "react" ; import { QRCodeCanvas } from "qrcode.react" ; const QrCode = () => {  const [url, setUrl] = useState( "" );  const downloadQRCode = ( e ) => {  e.preventDefault();  setUrl( "" ); };  const qrCodeEncoder = ( e ) => {  setUrl(e.target.value); };  const qrcode = (    < QRCodeCanvas
      id = "qrCode"
      value = {url}
      size = {300}
      bgColor = { "# 00ff00 "}      level = { " H "}  />
 );  return (    < div className = "qrcode__container" >
      < div > {qrcode} </ div >
      < div className = "input__group" >
        < form onSubmit = {downloadQRCode} >
          < label > Enter URL </ label >
          < input
            type = "text"
            value = {url}
            onChange = {qrCodeEncoder}
            placeholder = "//gzht888.com"
     />
          < button type = "submit" disabled = {!url} >
      Download QR code          </ button >
        </ form >
      </ div >
    </ div >
 ); }; export default QrCode;

上面的代码片段执行以下操作：

进口
```
useState
```
用于声明变量的初始状态，设置为空字符串的 url 和
```
setState
```
功能，
```
 setUrl
```
用于更新状态
图书馆，
```
 qrcode.react
```
, 用于渲染生成的二维码

接下来，使用
```
downloadQRCode
```
附加的功能
```
onSubmit
```
的方法
```
<form>
```
元素，因为这是由提交事件触发的
在
```
<input>
```
元素
```
onChange
```
带有函数的事件处理程序
```
'qrCodeEncoder'
```
接受用户的输入，获取它的值，并随着输入的每个新输入更改 QR 码

一个变量
```
qrcode
```
被建造。它包含在
```
QRCodeCanvas
```
组件并传递一些可用的提示，这些提示可以自定义并使 QR 码在浏览器上可见。查看文档以了解有关在组件中的更多信息

最后，
```
 <button>
```
元素被禁用，直到用户输入接收到数据

样式化 QR 码应用程序

在里面

src

文件夹，创建样式表，

 styles.css

负责应用程序的视觉吸引力

复制并粘贴以下代码：

 /* src/styles.css */
*, *:before, *:after { margin: 0 ;  padding : 0 ;  box-sizing : border-box; } :root { -- font - color : 230 35% 7% ; } body {  color : hsl ( var (--font-color)); } img {  max-width : 100% ;  display : block; } .section {  padding : 2em 0 ;  display : flex;  min-height : 100vh ;  align-items : center; } .container {  margin -inline: auto;  max-width : 75rem ;  width : 85% ; } .input__group {  display : flex;  margin-top : 2em ; } input {  width : 100% ;  padding : 1em 0.75em ;  border : 1px solid #444343 ;  border-radius : 3px ;  margin-bottom : 2em ;  margin-top : 0.75em ; } button {  border : unset;  background : hsl ( 231 , 77% , 90% );  padding : 1em 0.75em ;  color : hsl ( var (--font-color));  cursor : pointer;  text-transform : uppercase;  font-weight : bold; } @media screen and ( min-width : 768px ) {  .section {    padding : 0 ; }  input {    margin : 0 ; }  .qrcode__container {    display : flex;    align-items : center; }  .input__group {    margin-left : 3em ; }  input {    margin-bottom : 2em ;    margin-top : 0.75em ;    font-size : 1rem ; } }

接下来，在应用的入口点 App.js 中导入 QrCode.js 文件和样式表：

 // src/App.js
import QrCode from "./components/QrCode" ; import "./styles.css" ; export default function App ( ) {  return (    < div className = "section container" >
      < QrCode />
    </ div >
 ); }

完成这些步骤后，应用程序应如下所示：

下载生成的二维码

用户下载生成的二维码的选项使其在各种用例中都很有用。从打印代码到将其嵌入网站，用例是无限的。

回到

components/QrCode.js

文件，让我们更新代码库以使用

refs

访问文档对象模型 (DOM) 节点。

 // src/components/QrCode.js
import { useState, useRef } from "react" ; // other import
const QrCode = () => {  const [url, setUrl] = useState( "" );  const qrRef = useRef(); // include this: call the useRef function
 ...  const qrcode = (    < QRCodeCanvas
      id = "qrCode"
      value = {url}
      size = {300}
      bgColor = { "# 00ff00 "}      level = { " H "}  />
 );  return (    < div className = "qrcode__container" >
      < div ref = {qrRef} > {qrcode} </ div > {/* include this */}   {/* form input container */}    </ div >
 ); }; export default QrCode;

现在，让我们更新

downloadQRCode

中的功能

QrCode.js

文件，以便能够单击下载二维码按钮并将画布保存为图像文件。

 // src/components/QrCode.js
// imports
const QrCode = () => {  // state
  // useRef
  const downloadQRCode = ( e ) => {  e.preventDefault();    let canvas = qrRef.current.querySelector( "canvas" );    let image = canvas.toDataURL( "image/png" );    let anchor = document .createElement( "a" );  anchor.href = image;  anchor.download = `qr-code.png` ;    document .body.appendChild(anchor);  anchor.click();    document .body.removeChild(anchor);  setUrl( "" ); }; ...  return (    < div className = "qrcode__container" >
      < div ref = {qrRef} > {qrcode} </ div >
   {/* form input container */}    </ div >
 ); }; export default QrCode;

在里面

downloadQRCode

函数，发生以下情况：

它使用 .current 属性引用 ref 对象的当前值，以了解节点何时更改

这
```
qrcode.react
```
组件在 DOM 中生成 canvas 元素，使您能够动态创建内容

画布附加到
```
toDataURL
```
将指定类型参数设置为文件格式的方法，
```
 image/png
```

接下来是锚，
```
 <a>
```
元素被创建并且
```
href
```
设置为点击按钮时下载二维码的图片

锚元素被附加到文档正文中，一旦下载了二维码，它就会被删除

最后，状态 url 更新为
```
setUrl
```
提交表单时清除生成的二维码输入的变量

组件 QrCode.js 的完整代码：

 import { useState, useRef } from "react" ; import { QRCodeCanvas } from "qrcode.react" ; const QrCode = () => {  const [url, setUrl] = useState( "" );  const qrRef = useRef();  const downloadQRCode = ( e ) => { e.preventDefault();    let canvas = qrRef.current.querySelector( "canvas" );    let image = canvas.toDataURL( "image/png" );    let anchor = document .createElement( "a" ); anchor.href = image; anchor.download = `qr-code.png` ;    document .body.appendChild(anchor); anchor.click();    document .body.removeChild(anchor); setUrl( "" ); };  const qrCodeEncoder = ( e ) => { setUrl(e.target.value); };  const qrcode = (    < QRCodeCanvas
      id = "qrCode"
      value = {url}
      size = {300}
      bgColor = { "# 00ff00 "}      level = { " H "} />
 );  return (    < div className = "qrcode__container" >
      < div ref = {qrRef} > {qrcode} </ div >
      < div className = "input__group" >
        < form onSubmit = {downloadQRCode} >
          < label > Enter URL </ label >
          < input
            type = "text"
            value = {url}
            onChange = {qrCodeEncoder}
            placeholder = "//gzht888.com"
 />
          < button type = "submit" disabled = {!url} >
 Download QR code          </ button >
        </ form >
      </ div >
    </ div >
 ); }; export default QrCode;