创建快速响应 (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

加密货币增长：创建有效的用户角色

比特币 UTXO 模型，为独特的生态系统提供动力

Claude Sonnet 3.5 系统提示泄漏：法医分析

从论坛到信息流：社交媒体算法如何塑造数字互动

加密货币增长：创建有效的用户角色

比特币 UTXO 模型，为独特的生态系统提供动力

Claude Sonnet 3.5 系统提示泄漏：法医分析

从论坛到信息流：社交媒体算法如何塑造数字互动

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps