创建快速响应 (QR) 代码生成器的想法是将数据从图像转换为文本。二维码只是将图像数据表示为文本，它有很多有用的应用，从餐厅菜单和音乐会门票，到在线日历邀请、支付等等。 在本教程中，您将学习如何使用 JavaScript 库 React 创建二维码。使用 React 的好处是它使构建前端应用程序变得轻而易举，因为它为开发人员提供了重用组件的方法。 要完成本教程，将涵盖以下内容： 先决条件 入门 创建二维码生成器 样式化 QR 码应用程序 下载生成的二维码 结论 资源 演示 先决条件 要完成本教程，您需要以下内容： 对 React.js 的基本了解 安装在本地机器上 Node >= 14.0.0 和 npm >= 5.6 入门 在编写一行代码之前，打开终端并运行以下命令：    npx create-react-app qrcode-generator 上面的命令搭建了文件并安装了一些创建 React 应用程序所需的包。 接下来，导航到项目目录并运行可访问的开发服务器 使用以下命令在浏览器中预览应用程序：  http://localhost:3000    npm start cd qrcode-generator 最后，让我们安装创建二维码生成器所需的依赖库。运行命令：    npm install qrcode.react  : 一个 React 组件，用于生成 QR 码以渲染到 DOM。   qrcode.react 创建二维码生成器 到目前为止的工作很棒！  QR 码生成器的创建将从创建包含 QR 码结构的文件和组件开始。在 src 目录中，创建一个名为 components 的文件夹，并在该文件夹中创建一个名为 QrCode.js 的文件。 复制并粘贴以下代码：                              e.preventDefault();      };         setUrl(e.target.value); };                                    );                                                                                                ); };   // src/components/QrCode.js 
 import  { useState } from   "react" ; import  { QRCodeCanvas } from   "qrcode.react" ; const  QrCode = () =>  {    const  [url, setUrl] = useState( "" );    const  downloadQRCode = ( e ) =>  {   setUrl( "" );    const  qrCodeEncoder = ( e ) =>  {    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 = "https://hackernoon.com" 
      /> 
            < button   type = "submit"   disabled = {!url} > 
       Download QR code            </ button > 
          </ form > 
        </ div > 
      </ div > 
 export   default  QrCode; 上面的代码片段执行以下操作： 进口 用于声明变量的初始状态，设置为空字符串的 url 和 功能， 用于更新状态 useState setState   setUrl 图书馆，  , 用于渲染生成的二维码   qrcode.react 接下来，使用 附加的功能 的方法 元素，因为这是由提交事件触发的 downloadQRCode onSubmit <form> 在 元素 带有函数的事件处理程序 接受用户的输入，获取它的值，并随着输入的每个新输入更改 QR 码 <input> onChange 'qrCodeEncoder' 一个变量 被建造。它包含在 组件并传递一些可用的提示，这些提示可以自定义并使 QR 码在浏览器上可见。查看文档以了解有关在组件中 的更多信息 qrcode QRCodeCanvas 使用道具 最后， 元素被禁用，直到用户输入接收到数据   <button> 样式化 QR 码应用程序 在里面 文件夹，创建样式表， 负责应用程序的视觉吸引力 src   styles.css 复制并粘贴以下代码：    *, *:before, *:after {              }                }              }            }                    }                  }            }                                          }                                              }                    }        }      }        }                    } } /* src/styles.css */ 
  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 > 
 完成这些步骤后，应用程序应如下所示：  下载生成的二维码 用户下载生成的二维码的选项使其在各种用例中都很有用。从打印代码到将其嵌入网站，用例是无限的。 回到 文件，让我们更新代码库以使用 访问文档对象模型 (DOM) 节点。  components/QrCode.js refs                  ...                                    );                              ); };   // 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             e.preventDefault();                   anchor.href = image;         anchor.click();        }; ...                              ); };   // src/components/QrCode.js 
 // imports 
 const  QrCode = () =>  {    // state 
    // useRef 
    const  downloadQRCode = ( e ) =>  {      let  canvas = qrRef.current.querySelector( "canvas" );      let  image = canvas.toDataURL( "image/png" );      let  anchor = document .createElement( "a" );   anchor.download = `qr-code.png` ;      document .body.appendChild(anchor);      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 对象的当前值，以了解节点何时更改 这 组件在 DOM 中生成 canvas 元素，使您能够动态创建内容 qrcode.react 画布附加到 将指定类型参数设置为文件格式的方法， toDataURL   image/png 接下来是锚， 元素被创建并且 设置为点击按钮时下载二维码的图片   <a> href 锚元素被附加到文档正文中，一旦下载了二维码，它就会被删除 最后，状态 url 更新为 提交表单时清除生成的二维码输入的变量 setUrl 组件 QrCode.js 的完整代码：                             e.preventDefault();                  anchor.href = image;        anchor.click();        };        setUrl(e.target.value); };                                    );                                                                                                    ); };   import  { useState, useRef } from   "react" ; import  { QRCodeCanvas } from   "qrcode.react" ; const  QrCode = () =>  {    const  [url, setUrl] = useState( "" );    const  qrRef = useRef();    const  downloadQRCode = ( e ) =>  {      let  canvas = qrRef.current.querySelector( "canvas" );      let  image = canvas.toDataURL( "image/png" );      let  anchor = document .createElement( "a" );  anchor.download = `qr-code.png` ;      document .body.appendChild(anchor);      document .body.removeChild(anchor);  setUrl( "" );    const  qrCodeEncoder = ( e ) =>  {    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 = "https://hackernoon.com" 
  /> 
            < button   type = "submit"   disabled = {!url} > 
  Download QR code            </ button > 
          </ form > 
        </ div > 
      </ div > 
 export   default  QrCode; 应用程序的最终结果应如下所示：  结论 本教程描述了创建 QR 码生成器的过程以及如何下载它以供以后使用。 资源 二维码 锚元素 关于二维码

Target

2022 - HackerNoon Contributor of the Year - Data Visualization

2022 - HackerNoon Contributor of the Year - Frontend

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Javascript

2022 - No No No Nodejs

2022 - Remote Work Warrior

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Data Visualization

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Nominated for 2022 - Remote Work Warrior

Nominated for 2022 - No No No Nodejs

該音頻是用故事的原始語言製作的！

太長; 讀書

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

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

Floki 的 Valhalla 成为印度环斯里兰卡赛事联合赞助商

释放人工智能的力量。前沿技术的系统评价：摘要与介绍

想赢得 HackerNoon 写作比赛吗？以下是 #crypto-api 比赛获奖者的推荐

Telegram：加密岛通往大陆的桥梁

Floki 的 Valhalla 成为印度环斯里兰卡赛事联合赞助商

释放人工智能的力量。前沿技术的系统评价：摘要与介绍

想赢得 HackerNoon 写作比赛吗？以下是 #crypto-api 比赛获奖者的推荐

Telegram：加密岛通往大陆的桥梁

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps