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

Ý 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. 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 được cài đặt trên máy cục bộ của bạn Node> = 14.0.0 và npm> = 5.6 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 sử dụng lệnh bên dưới để xem trước ứng dụng trong trình duyệt: http://localhost:3000 npm start cd qrcode-generator 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 : Một thành phần React để tạo mã QR để hiển thị với DOM. qrcode.react 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: 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 = ( return ( {qrcode} Enter URL Download QR code export default QrCode; Các đoạn mã ở trên thực hiện những việc sau: Nhập khẩu đượ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à hàm số, được sử dụng để cập nhật trạng thái useState setState setUrl Thư viện, , được sử dụng để hiển thị mã QR đã tạo qrcode.react Tiếp theo, việc sử dụng chức năng gắn liền với phương pháp của vì điều này được kích hoạt bởi sự kiện gửi downloadQRCode onSubmit Trên phần tử, trình xử lý sự kiện với hàm 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 onChange 'qrCodeEncoder' Một biến số được tạo ra. Nó có trong 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 trong thành phần qrcode QRCodeCanvas sử dụng đạo cụ cuối cùng 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 thư mục, tạo biểu định kiểu, chịu trách nhiệm về sự hấp dẫn trực quan của ứng dụng src styles.css Sao chép và dán mã sau: *, *: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 ; 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 ( 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 tệp, hãy cập nhật cơ sở mã để sử dụng để truy cập các nút của mô hình đối tượng tài liệu (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 = ( return ( {qrcode} {/* include this */} {/* form input container */} export default QrCode; Bây giờ, hãy cập nhật chức năng trong để 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. 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 ( {qrcode} {/* form input container */} export default QrCode; bên trong chức năng, sau đây diễn ra: downloadQRCode 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 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 qrcode.react Canvas được nối vào phương thức với tham số kiểu đã chỉ định được đặt thành định dạng tệp, toDataURL image/png Tiếp theo, mỏ neo, phần tử được tạo và được đặt thành hình ảnh tải xuống mã QR khi nút được nhấp vào href 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 biến xóa đầu vào cho mã QR được tạo khi biểu mẫu được gửi setUrl Mã hoàn chỉnh cho thành phần 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 = ( return ( {qrcode} Enter URL Download QR code 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