Kopio leikepöydälle -ominaisuuden lisääminen React-sovellukseesi

Tietojen, kuten koodinpätkien, URL-linkkien tai tekstinpätkien, manuaalinen kopioiminen voi olla aikaa vievää ja virhealtista, etenkin mobiililaitteissa, joissa näyttö on pieni. "Kopioi leikepöydälle" -toiminnon lisääminen paitsi säästää aikaa, myös vähentää mahdollisia virheitä ja kirjoitusvirheitä.

Kopioi leikepöydälle -toiminnon määrittäminen

Luo React-sovelluksessa uusi komponentti nimeltä CopyButton. Tämä komponentti hyväksyy tekstin, joka sen pitäisi kopioida leikepöydälle.

Jos sinulla ei ole React-projektia työstettävänä, käytä React App -apuohjelmaa telineeseen yksi.

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

Kun painiketta painetaan, sen pitäisi kutsua toiminto nimeltä Kopioi leikepöydälle joka kopioi tekstin leikepöydälle.

Kopiointitoiminnon toteuttamiseksi voit käyttää leikepöydän APIa suoraan tai käyttää NPM-pakettia.

Tämä opas näyttää kuinka käyttää molempia.

Leikepöydän API: n käyttäminen tekstin kopioimiseen leikepöydälle Reactissa

The Leikepöydän API tarjoaa tavan käyttää leikepöydän komentoja, kuten kopioi, leikkaa ja liitä.

Päästäksesi siihen, sinun on käytettävä navigator.leikepöytä objekti saatavilla useimmissa nykyaikaisissa selaimissa. Siinä on useita menetelmiä, joiden avulla voit kirjoittaa tai lukea leikepöydän sisältöä.

Voit kirjoittaa leikepöydälle käyttämällä kirjoittaa tekstiä menetelmä.

Katsotaanpa, kuinka tämä toteutetaan Kopioi leikepöydälle toiminto CopyButton komponentti.

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

The kirjoittaa tekstiä menetelmä hyväksyy tekstin, jonka se kopioi leikepöydälle. Tämä menetelmä on asynkroninen, joten sinun on käytettävä await-avainsanaa ennen kuin siirryt eteenpäin.

Jos teksti kopioidaan leikepöydälle, näytä onnistumisviesti, muuten näytä virheilmoitus varoituksena.

Selaimen käyttöoikeuksia tarkistetaan

Hyvän käytännön mukaisesti on tärkeää varmistaa, että käyttäjä on myöntänyt selaimelle luvan leikepöydälle. Voit tarkistaa, onko käyttäjä myöntänyt leikepöytä-kirjoitus lupa käyttämällä navigator.permissions Web API ennen kopioimista leikepöydälle alla kuvatulla tavalla.

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);
 }
};

Yllä olevassa muokatussa funktiossa vain, kun käyttäjä on antanut luvan kirjoittaa leikepöydälle, kirjoittaa siihen. Muussa tapauksessa funktio antaa virheen.

NPM-paketin käyttäminen Leikepöydälle kopioimiseen Reactissa

Jos et halua käyttää leikepöydän APIa suoraan, on olemassa useita NPM-paketteja voit käyttää sen sijaan. React-sovelluksissa voit käyttää reagoi-kopioi-leikepöydälle paketti. Se on melko suosittu yli miljoonalla viikoittaisella latauksella, ja se on myös helppokäyttöinen.

Asenna se React-sovellukseesi suorittamalla seuraava komento terminaalissa:

npm install react-copy-to-clipboard

Kun olet asentanut, tuo Kopioi leikepöydälle komponentti alkaen reagoi-kopioi-leikepöydälle sisään CopyButton komponentti.

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

The Kopioi leikepöydälle komponentti hyväksyy tekstin, jonka haluat kopioida rekvisiittana. Se hyväksyy myös alikomponentin, joka napsautettaessa käynnistää kopiointitoiminnon.

Käytä esimerkiksi alla olevaa koodia kopioidaksesi leikepöydälle painikkeella:

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

Huomaa käsittelijätoiminto, onCopy. Se hyväksyy kaksi argumenttia, teksti ja tulos jossa teksti on kopioitu teksti ja tulos on looginen arvo, joka osoittaa, onnistuiko kopiointitoiminto vai ei.

Miksi käyttää kopiota leikepöydälle -toimintoa?

Olet oppinut käyttämään leikepöydän sovellusliittymää ja react-copy-to-leikepöydälle -pakettia tekstin kopioimiseen React-sovelluksen leikepöydälle. Vaikka sovelluksesi käyttäjät voivat yksinkertaisesti valita tekstin ja käyttää selaimesi kopiointitoimintoa, tekstin kopioiminen napsauttamalla on yksinkertaisempaa ja parempi käyttökokemuksen kannalta.