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

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

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

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

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

 function CopyButton({text}) {
    const copyToClipboard = () => {
        
    }
  return (
    <button onClick={copyToClipboard}>Copy</button>
  )
}
export default CopyButton
 

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

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

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

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

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

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

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

Ας δούμε πώς να το εφαρμόσουμε στη συνάρτηση copyToClipboard του στοιχείου 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 {
            throw new Error("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

Αφού εγκατασταθεί, εισαγάγετε το στοιχείο CopyToClipboard από το react-copy-to-clipboard στο στοιχείο CopyButton.

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

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

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

 <CopyToClipboard text={text} onCopy={(text, result) => console.log(result)}>
   <button>Copy</button>
</CopyToClipboard>

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

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

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