bereaksi salinan ke clipboard
onClick={() => {navigator.clipboard.writeText(this.state.textToCopy)}}
Disgusted Dugong
onClick={() => {navigator.clipboard.writeText(this.state.textToCopy)}}<button
onClick={() => navigator.clipboard.writeText('Copy this text to clipboard')}
>
Copy
</button><button
onClick={() => navigator.clipboard.writeText('Copy this text to clipboard')}
>
Copy
</button>
import React, { useRef, useState } from 'react';
export default function CopyExample() {
const [copySuccess, setCopySuccess] = useState('');
const textAreaRef = useRef(null);
function copyToClipboard(e) {
textAreaRef.current.select();
document.execCommand('copy');
// This is just personal preference.
// I prefer to not show the the whole text area selected.
e.target.focus();
setCopySuccess('Copied!');
};
return (
<div>
{
/* Logical shortcut for only displaying the
button if the copy command exists */
document.queryCommandSupported('copy') &&
<div>
<button onClick={copyToClipboard}>Copy</button>
{copySuccess}
</div>
}
<form>
<textarea
ref={textAreaRef}
value='Some text to copy'
/>
</form>
</div>
);
}import {CopyField} from '@eisberg-labs/mui-copy-field';
<CopyField
label="Click on copy Button"
value={"Enter text"}
onCopySuccess={console.log}
onCopyError={console.log}
copyTooltip={"Some copy tooltip. Default is Copy"}
/>