如何使用React制作二维码生成器

时间：2023-03-16 20:56:06 科技观察

译者|赵清瑶校对|孙淑娟创建二维码生成器（QuickResponseCodeGenerator）就是将图片格式转换成文本格式进行转换。二维码（QR码）是用图像数据来表示文字信息。它有很多应用场景，比如餐厅菜单、演唱会门票、在线日历邀请、支付等场景。在本教程中，您将学习如何使用JavaScript库React创建QR码。React为开发人员提供了重用组件的方法，使构建前端应用程序变得轻而易举。一、先决条件要完全理解本文，您需要具备以下知识和环境：了解React.js的基本内容您的环境需要满足Node>=14.0.0，npm>=5.62。准备工作首先，打开终端并运行以下命令：npxcreate-react-appqrcode-generator上面的命令附带了必要的文件，并安装了创建React应用程序所需的包。接下来使用如下命令切换到你构建的项目目录，运行开发服务器（DevelopmentServer），这样就可以访问http://localhost:3000，以浏览器的形式预览应用。cdqrcode-generatornpmstart最后，让我们使用以下命令安装创建二维码生成器所需的依赖项：npminstallqrcode.reactqrcode.react：一个生成二维码并将其呈现为DOM的React组件。3.创建QR码生成器QR码生成器的创建将从创建包含QR码结构的文件和组件开始。在src目录中，创建一个名为components的文件夹，并在该文件夹中创建一个名为QrCode.js的文件。下面是对应的代码实现方式：//src/components/QrCode.jsimport{useState}from"react";import{QRCodeCanvas}from"qrcode.react";constQrCode=()=>{const[url,setUrl]=使用状态（“”）；constdownloadQRCode=(e)=>{e.preventDefault();设置网址（“”）;};constqrCodeEncoder=(e)=>{setUrl(e.target.value);};constqrcode=();返回(text"value={url}notallow={qrCodeEncoder}placeholder="https://hackernoon.com"/>下载二维码

);};导出默认二维码;上面的代码片段做了以下工作：importuseState用于声明变量的初始状态，url设置为空字符串，setState函数和setUrl用于更新状态；库qrcode.react用于渲染生成的二维码；接下来，使用from元素中onSubmit方法附带的downloadQRCode函数，由submit事件触发；在input元素中，带有函数'qrCodeEncoder'的onChange事件处理程序用于接收用户输入并根据获取的输入值更改二维码；创建一个接受QRCodeCanvas组件的变量qrcode，并传递一些可用的自定义属性，使QR码可以在浏览器上显示。最后，按钮元素将被禁用，直到收到用户输入数据。4.设计二维码应用在src文件夹下，创建样式表（stylesheet）styles.css，负责应用的显示效果。下面是对应的代码实现方法：/*src/styles.css*/*,*:before,*:after{margin:0;填充：0；box-sizing:border-box;}:root{--font-color:23035%7%;}body{颜色:hsl(var(--font-color));}img{最大宽度:100%;显示：块；}.section{填充：2em0；显示：弹性；最小高度：100vh；对齐项目：居中；}。容器{边距内联：自动；最大宽度：75rem；宽度：85%；}.input__group{显示：flex；margin-top:2em;}input{width:100%;填充：1em0.75em；边框：1px实心#444343；边界半径：3px；底部边距：2em；顶部边距：0.75em；}按钮{边框：未设置；背景：hsl（231、77%、90%）；填充：1em0.75em；:hsl(var(--字体颜色));游标：指针；文本转换：大写；font-weight:bold;}@mediascreenand(min-width:768px){.section{padding:0;}输入{保证金：0;}.qrcode__container{显示：flex；对齐项目：居中；}.input__group{左边距：3em；}input{margin-bottom:2em;顶部边距：0.75em；字体大小：1rem；}}接下来在app的入口app.js和stylesheet中导入QrCode.js文件：//src/App.jsimportQrCodefrom"./components/QrCode";import"./styles.css";exportdefaultfunctionApp(){return(

);}完成以上步骤后，app会显示如下图：5.下载生成的二维码用户可以选择下载生成的QR码，以便将其应用于各种用例从打印QR码到将它们嵌入网站，这样的例子不胜枚举。回到components/QrCode.js文件，让我们更新代码库以使用refs访问文档对象模型节点（DOM节点）。//src/components/QrCode.jsimport{useState,useRef}from"react";//otherimportconstQrCode=()=>{const[url,setUrl]=useState("");constqrRef=useRef();//包含这个：调用useRef函数...constqrcode=();return({qrcode}