Znalazłem najlepszy sposób na zrobienie tego. mam na myśli najszybszy sposób: w3school
https://www.w3schools.com/howto/howto_js_copy_clipboard.asp
Wewnątrz elementu funkcjonalnego Reaguj. Utwórz funkcję o nazwie handleCopy:
function handleCopy() {
// get the input Element ID. Save the reference into copyText
var copyText = document.getElementById("mail")
// select() will select all data from this input field filled
copyText.select()
copyText.setSelectionRange(0, 99999)
// execCommand() works just fine except IE 8. as w3schools mention
document.execCommand("copy")
// alert the copied value from text input
alert(`Email copied: ${copyText.value} `)
}
<>
<input
readOnly
type="text"
value="exemple@email.com"
id="mail"
/>
<button onClick={handleCopy}>Copy email</button>
</>
Jeśli nie używasz Reacta, w3schools mają również jeden fajny sposób na zrobienie tego z dołączoną etykietką: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard2
Jeśli korzystasz z Reacta, fajne rozwiązanie: użyj Toastify, aby zaalarmować wiadomość.
https://github.com/fkhadra/react-toastify To jest biblioteka bardzo łatwa w użyciu. Po instalacji możesz zmienić tę linię:
alert(`Email copied: ${copyText.value} `)
Na coś takiego:
toast.success(`Email Copied: ${copyText.value} `)
Jeśli chcesz go użyć, nie zapomnij zainstalować toastify. import ToastContainer, a także toasty css:
import { ToastContainer, toast } from "react-toastify"
import "react-toastify/dist/ReactToastify.css"
i włóż pojemnik na tosty do powrotu.
import React from "react"
import { ToastContainer, toast } from "react-toastify"
import "react-toastify/dist/ReactToastify.css"
export default function Exemple() {
function handleCopy() {
var copyText = document.getElementById("mail")
copyText.select()
copyText.setSelectionRange(0, 99999)
document.execCommand("copy")
toast.success(`Hi! Now you can: ctrl+v: ${copyText.value} `)
}
return (
<>
<ToastContainer />
<Container>
<span>E-mail</span>
<input
readOnly
type="text"
value="myemail@exemple.com"
id="mail"
/>
<button onClick={handleCopy}>Copy Email</button>
</Container>
</>
)
}