Kaip pridėti „React“ programos kopiją į mainų sritį

Neautomatinis informacijos kopijavimas, nesvarbu, ar tai kodo fragmentai, URL nuorodos ar teksto fragmentai, gali užtrukti daug laiko ir sukelti klaidų, ypač mobiliuosiuose įrenginiuose, kurių ekranas mažas. Pridėjus „kopijavimo į mainų sritį“ funkciją, ne tik sutaupoma laiko, bet ir sumažėja klaidų bei rašybos klaidų tikimybė.

Kopijavimo į mainų sritį funkcijos nustatymas

Programoje „React“ sukurkite naują komponentą pavadinimu Kopijavimo mygtukas. Šis komponentas priima tekstą, kurį jis turėtų nukopijuoti į mainų sritį.

Jei neturite „React“ projekto, su kuriuo galėtumėte dirbti, naudokite „react“ programos kūrimo įrankį pastoliams vieną.

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

Spustelėjus mygtukas turi iškviesti funkciją, pavadintą nukopijuoti į iškarpinę kuri nukopijuoja tekstą į mainų sritį.

Norėdami įdiegti kopijavimo funkciją, galite tiesiogiai naudoti mainų srities API arba naudoti NPM paketą.

Šis vadovas parodys, kaip naudoti abu.

Iškarpinės API naudojimas norint nukopijuoti tekstą į mainų sritį „React“.

The Mainų srities API suteikia galimybę sąveikauti su iškarpinės komandomis, tokiomis kaip kopijavimas, iškirpimas ir įklijavimas.

Norėdami jį pasiekti, turite naudoti navigatorius.iškarpinė objektas, pasiekiamas daugelyje šiuolaikinių naršyklių. Jame yra keli metodai, leidžiantys rašyti arba skaityti iškarpinės turinį.

Norėdami rašyti į mainų sritį, naudokite rašyti Tekstą metodas.

Pažiūrėkime, kaip tai įgyvendinti nukopijuoti į iškarpinę funkcija Kopijavimo mygtukas komponentas.

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 rašyti Tekstą metodas priima tekstą, kurį nukopijuos į mainų sritį. Šis metodas yra asinchroninis, todėl prieš tęsdami turite naudoti laukimo raktinį žodį.

Jei tekstas nukopijuotas į mainų sritį, parodykite sėkmės pranešimą, kitaip klaidos pranešimas bus rodomas kaip įspėjimas.

Naršyklės leidimų tikrinimas

Kaip gera praktika, svarbu užtikrinti, kad vartotojas būtų suteikęs naršyklei leidimą pasiekti iškarpinę. Galite patikrinti, ar vartotojas suteikė iškarpinė-rašyti leidimas naudojant navigatorius.leidimai Web API prieš nukopijuodami į mainų sritį, kaip parodyta toliau.

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

Aukščiau pateiktoje modifikuotoje funkcijoje į ją rašo tik tada, kai vartotojas suteikia leidimą rašyti į mainų sritį. Priešingu atveju funkcija pateikia klaidą.

NPM paketo naudojimas norint nukopijuoti į mainų sritį programoje „React“.

Jei nenorite tiesiogiai naudoti mainų srities API, yra keli NPM paketai vietoj to galite naudoti. React programoms galite naudoti reaguoti-kopijuoti-į iškarpinę paketą. Jis gana populiarus, nes per savaitę atsisiunčiamas daugiau nei 1 milijonas kartų, taip pat juo lengva naudotis.

Įdiekite jį savo React programoje, terminale paleisdami šią komandą:

npm install react-copy-to-clipboard

Įdiegę importuokite Nukopijuoti į iškarpinę komponentas iš reaguoti-kopijuoti-į iškarpinę į Kopijavimo mygtukas komponentas.

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

The Nukopijuoti į iškarpinę komponentas priima tekstą, kurį norite kopijuoti, kaip rekvizitus. Jis taip pat priima antrinį komponentą, kurį spustelėjus suaktyvinamas kopijavimo veiksmas.

Pavyzdžiui, norėdami nukopijuoti į mainų sritį mygtuku, naudokite toliau pateiktą kodą:

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

Atkreipkite dėmesį į tvarkyklės funkciją, onCopy. Ji priima du argumentus, tekstą ir rezultatas kur tekstas yra nukopijuotas tekstas, o rezultatas yra loginis dydis, nurodantis, ar kopijavimo veiksmas buvo sėkmingas, ar ne.

Kodėl verta naudoti kopijavimo į mainų sritį funkciją?

Sužinojote, kaip naudoti mainų srities API ir paketą „React-Copy-to-Clipboard“, kad nukopijuotumėte tekstą į mainų sritį „React“ programoje. Nors jūsų programos naudotojai gali tiesiog pasirinkti tekstą ir naudoti jūsų naršyklės kopijavimo funkciją, spustelėjus tekstą kopijuoti yra paprasčiau ir geriau naudotojams.