57,362 lượt đọc

Cách xây dựng trình tạo mã QR trong React

từ tác giả Teri Eyenike8m2022/07/01

dài quá đọc không nổi

Ý tưởng đằng sau việc tạo trình tạo mã phản hồi nhanh (QR) là dịch dữ liệu từ hình ảnh sang văn bản. Mã QR chỉ đơn giản là biểu diễn dữ liệu hình ảnh dưới dạng văn bản và nó có rất nhiều ứng dụng hữu ích từ thực đơn nhà hàng và vé xem hòa nhạc, đến lời mời trên lịch trực tuyến, thanh toán và danh sách tiếp tục.

Company Mentioned

featured image - Cách xây dựng trình tạo mã QR trong React

Trong hướng dẫn này, bạn sẽ học cách tạo mã QR bằng thư viện JavaScript, React. Lợi ích của việc sử dụng React là nó làm cho việc xây dựng các ứng dụng giao diện người dùng trở nên dễ dàng vì nó cung cấp cho các nhà phát triển cách sử dụng lại các thành phần.

Để làm theo hướng dẫn này, những điều sau đây sẽ được đề cập đến:

Điều kiện tiên quyết
Bắt đầu
Tạo trình tạo mã QR
Tạo kiểu cho ứng dụng mã QR
Tải xuống mã QR đã tạo
Sự kết luận
Tài nguyên

Thử nghiệm

Điều kiện tiên quyết

Để hoàn thành hướng dẫn này, bạn cần những điều sau:

Hiểu biết cơ bản về React.js

Node> = 14.0.0 và npm> = 5.6 được cài đặt trên máy cục bộ của bạn

Bắt đầu

Trước khi viết một dòng mã, hãy mở thiết bị đầu cuối của bạn và chạy lệnh sau:

 npx create-react-app qrcode-generator

Lệnh trên tạo các tệp và cài đặt một số gói cần thiết để tạo ứng dụng React.

Tiếp theo, điều hướng đến thư mục dự án và chạy máy chủ phát triển có thể truy cập trên

 http://localhost:3000

sử dụng lệnh bên dưới để xem trước ứng dụng trong trình duyệt:

 cd qrcode-generator npm start

Cuối cùng, hãy cài đặt thư viện phụ thuộc cần thiết để tạo trình tạo mã QR. Chạy lệnh:

 npm install qrcode.react

 qrcode.react

: Một thành phần React để tạo mã QR để hiển thị với DOM.

Tạo trình tạo mã QR

Công việc tuyệt vời cho đến nay!

Việc tạo trình tạo mã QR sẽ bắt đầu bằng việc tạo các tệp và thành phần chứa cấu trúc của mã QR. Bên trong thư mục src, tạo một thư mục có tên là các thành phần và một tệp có tên QrCode.js trong thư mục.

Sao chép và dán mã sau:

 // 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 = "https://hackernoon.com"
     />
          < button type = "submit" disabled = {!url} >
      Download QR code          </ button >
        </ form >
      </ div >
    </ div >
 ); }; export default QrCode;

Các đoạn mã ở trên thực hiện những việc sau:

Nhập khẩu
```
 useState
```
được sử dụng để khai báo trạng thái ban đầu của biến, url được đặt thành một chuỗi rỗng và
```
 setState
```
hàm số,
```
 setUrl
```
được sử dụng để cập nhật trạng thái
Thư viện,
```
 qrcode.react
```
, được sử dụng để hiển thị mã QR đã tạo

Tiếp theo, việc sử dụng
```
 downloadQRCode
```
chức năng gắn liền với
```
 onSubmit
```
phương pháp của
```
 <form>
```
vì điều này được kích hoạt bởi sự kiện gửi
Trên
```
 <input>
```
phần tử,
```
 onChange
```
trình xử lý sự kiện với hàm
```
 'qrCodeEncoder'
```
nhận đầu vào của người dùng, nhận giá trị của nó và thay đổi mã QR với mỗi đầu vào mới được nhập

Một biến số
```
 qrcode
```
được tạo ra. Nó có trong
```
 QRCodeCanvas
```
và chuyển một số lời nhắc có sẵn để tùy chỉnh và làm cho mã QR hiển thị trên trình duyệt. Xem tài liệu để tìm hiểu thêm về cách sử dụng đạo cụ trong thành phần

cuối cùng
```
 <button>
```
phần tử bị vô hiệu hóa cho đến khi đầu vào của người dùng nhận được dữ liệu

Tạo kiểu cho ứng dụng mã QR

bên trong

src

thư mục, tạo biểu định kiểu,

 styles.css

chịu trách nhiệm về sự hấp dẫn trực quan của ứng dụng

Sao chép và dán mã sau:

 /* 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 ; } }

Tiếp theo, nhập tệp QrCode.js và biểu định kiểu vào điểm nhập của ứng dụng, App.js:

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

Với các bước hoàn tất, ứng dụng sẽ trông như thế này:

Tải xuống mã QR đã tạo

Tùy chọn để người dùng tải xuống mã QR đã tạo giúp nó hữu ích trong nhiều trường hợp sử dụng. Từ việc in mã đến nhúng mã trên trang web, các trường hợp sử dụng là không giới hạn.

Quay lại

 components/QrCode.js

tệp, hãy cập nhật cơ sở mã để sử dụng

 refs

để truy cập các nút của mô hình đối tượng tài liệu (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;

Bây giờ, hãy cập nhật

 downloadQRCode

chức năng trong

 QrCode.js

để có thể nhấp vào nút tải xuống mã QR và lưu canvas dưới dạng tệp hình ảnh.

 // 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;

bên trong

 downloadQRCode

chức năng, sau đây diễn ra:

Nó tham chiếu giá trị hiện tại của đối tượng ref với thuộc tính .current để biết khi nào nút thay đổi

Các
```
 qrcode.react
```
thành phần tạo ra phần tử canvas trong DOM, cung cấp cho bạn khả năng tạo nội dung động

Canvas được nối vào
```
 toDataURL
```
phương thức với tham số kiểu đã chỉ định được đặt thành định dạng tệp,
```
 image/png
```

Tiếp theo, mỏ neo,
```
 <a>
```
phần tử được tạo và
```
 href
```
được đặt thành hình ảnh tải xuống mã QR khi nút được nhấp vào

Phần tử liên kết được nối vào nội dung tài liệu và khi mã QR được tải xuống, nó sẽ bị xóa

Cuối cùng, url trạng thái được cập nhật với
```
 setUrl
```
biến xóa đầu vào cho mã QR được tạo khi biểu mẫu được gửi

Mã hoàn chỉnh cho thành phần 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 = "https://hackernoon.com"
 />
          < button type = "submit" disabled = {!url} >
 Download QR code          </ button >
        </ form >
      </ div >
    </ div >
 ); }; export default QrCode;

Kết quả cuối cùng của ứng dụng sẽ giống như sau:

Sự kết luận

Hướng dẫn này mô tả quy trình tạo trình tạo mã QR và cách tải xuống để sử dụng sau này.

Tài nguyên

Mã QR

Phần tử neo

Tất cả về mã QR

L O A D I N G
. . . comments & more!

About Author

Teri Eyenike@terieyenike

I am a frontend developer with a particular interest in making things simple and usable.

Read my stories Book a call with @terieyenike