Πώς να προσθέσετε τη δυνατότητα αντιγραφής στο πρόχειρο στην εφαρμογή React σας

Η μη αυτόματη αντιγραφή πληροφοριών, είτε πρόκειται για αποσπάσματα κώδικα, συνδέσμους URL ή θραύσματα κειμένου μπορεί να είναι χρονοβόρα και επιρρεπής σε σφάλματα, ειδικά σε κινητές συσκευές όπου η οθόνη είναι μικρή. Η προσθήκη μιας λειτουργικότητας "αντιγραφή στο πρόχειρο" όχι μόνο εξοικονομεί χρόνο, αλλά μειώνει επίσης τις πιθανότητες για λάθη και τυπογραφικά λάθη.

Ρύθμιση της Λειτουργίας Αντιγραφής στο Πρόχειρο

Σε μια εφαρμογή React, δημιουργήστε ένα νέο στοιχείο με το όνομα CopyButton. Αυτό το στοιχείο δέχεται κείμενο που πρέπει να αντιγράψει στο πρόχειρο.

Εάν δεν έχετε ένα έργο React για να εργαστείτε, χρησιμοποιήστε το βοηθητικό πρόγραμμα δημιουργίας react app να σκαλώσει ένα.

functionCopyButton({text}) {
const copyToClipboard = () => {
// copy to clipboard
 }
return (
Copy</button>
 )
}
exportdefault CopyButton

Όταν κάνετε κλικ, το κουμπί πρέπει να καλεί μια συνάρτηση με το όνομα

Αντιγραφή στο πρόχειρο που αντιγράφει το κείμενο στο πρόχειρο.

Για να εφαρμόσετε τη λειτουργία αντιγραφής, μπορείτε να χρησιμοποιήσετε απευθείας το API του προχείρου ή να χρησιμοποιήσετε ένα πακέτο NPM.

Αυτός ο οδηγός θα σας δείξει πώς να χρησιμοποιήσετε και τα δύο.

Χρήση του Clipboard API για την αντιγραφή κειμένου σε ένα Πρόχειρο στο React

ο API προχείρου παρέχει έναν τρόπο αλληλεπίδρασης με εντολές του προχείρου, όπως αντιγραφή, αποκοπή και επικόλληση.

Για να αποκτήσετε πρόσβαση σε αυτό, πρέπει να χρησιμοποιήσετε το navigator.clipboard αντικείμενο διαθέσιμο στα περισσότερα σύγχρονα προγράμματα περιήγησης. Έχει πολλές μεθόδους που σας επιτρέπουν να γράψετε ή να διαβάσετε τα περιεχόμενα του προχείρου.

Για να γράψετε στο πρόχειρο, χρησιμοποιήστε το writeText μέθοδος.

Ας δούμε πώς να το εφαρμόσουμε στο Αντιγραφή στο πρόχειρο λειτουργία του CopyButton συστατικό.

const copyToClipboard = async (text) => {
try {
await navigator.clipboard.writeText(text);
 alert('Text copied to clipboard:', text);
 } catch (error) {
 alert('Error copying to clipboard:', error);
 }
 };

ο writeText μέθοδος δέχεται το κείμενο που θα αντιγράψει στο πρόχειρο. Αυτή η μέθοδος είναι ασύγχρονη, επομένως πρέπει να χρησιμοποιήσετε τη λέξη-κλειδί αναμονής πριν προχωρήσετε.

Εάν το κείμενο αντιγράφεται στο πρόχειρο, εμφανίστε ένα μήνυμα επιτυχίας, διαφορετικά εμφανίστε το μήνυμα σφάλματος ως ειδοποίηση.

Έλεγχος δικαιωμάτων προγράμματος περιήγησης

Ως καλή πρακτική, είναι σημαντικό να διασφαλίσετε ότι ο χρήστης έχει παραχωρήσει στο πρόγραμμα περιήγησης άδεια πρόσβασης στο πρόχειρο. Μπορείτε να ελέγξετε εάν ο χρήστης έχει χορηγήσει πρόχειρο-γράψτε άδεια χρησιμοποιώντας το navigator.permissions Web API πριν από την αντιγραφή στο πρόχειρο όπως φαίνεται παρακάτω.

const copyToClipboard = async () => {
try {
const permissions = await navigator.permissions.query({name: "clipboard-write"})
if (permissions.state "granted" || permissions.state "prompt") {
await navigator.clipboard.writeText(text);
 alert('Text copied to clipboard!');
 } else {
thrownewError("Can't access the clipboard. Check your browser permissions.")
 }
 } catch (error) {
 alert('Error copying to clipboard:', error);
 }
};

Στην παραπάνω τροποποιημένη συνάρτηση, μόνο όταν ο χρήστης έχει παραχωρήσει άδεια εγγραφής στο πρόχειρο γράφουν σε αυτό. Διαφορετικά, η συνάρτηση παρουσιάζει σφάλμα.

Χρήση πακέτου NPM για αντιγραφή στο Πρόχειρο στο React

Εάν δεν θέλετε να χρησιμοποιήσετε απευθείας το API του προχείρου, υπάρχουν πολλαπλά πακέτα NPM μπορείτε να χρησιμοποιήσετε αντί. Για εφαρμογές React, μπορείτε να χρησιμοποιήσετε το react-copy-to-clipboard πακέτο. Είναι αρκετά δημοφιλές με περισσότερες από 1 εκατομμύριο εβδομαδιαίες λήψεις και είναι επίσης εύκολο στη χρήση.

Εγκαταστήστε το στην εφαρμογή React εκτελώντας την ακόλουθη εντολή στο τερματικό:

npm install react-copy-to-clipboard

Μόλις εγκατασταθεί, εισαγάγετε το Αντιγραφή στο πρόχειρο συστατικό από react-copy-to-clipboard μέσα στο CopyButton συστατικό.

import {CopyToClipboard} from'react-copy-to-clipboard';

ο Αντιγραφή στο πρόχειρο συστατικό αποδέχεται το κείμενο που θέλετε να αντιγράψετε ως υποστήριγμα. Αποδέχεται επίσης ένα θυγατρικό στοιχείο που όταν πατηθεί ενεργοποιεί την ενέργεια αντιγραφής.

Για παράδειγμα, χρησιμοποιήστε τον παρακάτω κώδικα για να αντιγράψετε στο πρόχειρο με ένα κουμπί:

console.log(result)}>
Copy</button>
</CopyToClipboard>

Σημειώστε τη λειτουργία χειριστή, onCopy. Δέχεται δύο επιχειρήματα, κείμενο και αποτέλεσμα όπου κείμενο είναι το αντιγραμμένο κείμενο και το αποτέλεσμα είναι ένα boolean που υποδεικνύει εάν η ενέργεια αντιγραφής ήταν επιτυχής ή όχι.

Γιατί να χρησιμοποιήσετε μια λειτουργία αντιγραφής στο πρόχειρο;

Έχετε μάθει πώς να χρησιμοποιείτε το API του προχείρου και το πακέτο react-copy-to-clipboard για να αντιγράψετε κείμενο στο πρόχειρο σε μια εφαρμογή React. Ενώ οι χρήστες της εφαρμογής σας μπορούν απλώς να επιλέξουν το κείμενο και να χρησιμοποιήσουν τη λειτουργία αντιγραφής του προγράμματος περιήγησής σας, το να κάνετε κλικ για να αντιγράψετε κείμενο είναι πιο απλό και καλύτερο για την εμπειρία χρήστη.