ReactJS를 사용하고 있으며 사용자가 링크를 클릭하면 텍스트를 클립 보드에 복사하고 싶습니다.
Chrome 52를 사용하고 있으며 다른 브라우저를 지원할 필요가 없습니다.
이 코드로 인해 데이터가 클립 보드에 복사되지 않는 이유를 알 수 없습니다. (코드 스 니펫의 출처는 Reddit 게시물에서 온 것입니다).
내가 잘못하고 있습니까? 누구나 reactjs를 사용하여 클립 보드에 복사를 구현하는 “올바른”방법이 있다고 제안 할 수 있습니까?
copyToClipboard = (text) => {
console.log('text', text)
var textField = document.createElement('textarea')
textField.innerText = text
document.body.appendChild(textField)
textField.select()
document.execCommand('copy')
textField.remove()
}
답변
나는 개인적으로 이것에 대한 도서관의 필요성을 보지 못한다. http://caniuse.com/#feat=clipboard를 보면 현재 널리 지원되고 있지만 현재 클라이언트에 기능이 있는지 확인하고 복사 버튼이 보이지 않으면 숨길 수 있습니다.
import React from 'react';
class CopyExample extends React.Component {
constructor(props) {
super(props);
this.state = { copySuccess: '' }
}
copyToClipboard = (e) => {
this.textArea.select();
document.execCommand('copy');
// This is just personal preference.
// I prefer to not show the the whole text area selected.
e.target.focus();
this.setState({ copySuccess: 'Copied!' });
};
render() {
return (
<div>
{
/* Logical shortcut for only displaying the
button if the copy command exists */
document.queryCommandSupported('copy') &&
<div>
<button onClick={this.copyToClipboard}>Copy</button>
{this.state.copySuccess}
</div>
}
<form>
<textarea
ref={(textarea) => this.textArea = textarea}
value='Some text to copy'
/>
</form>
</div>
);
}
}
export default CopyExample;
업데이트 : React 16.7.0-alpha.0에서 React Hooks를 사용하여 다시 작성
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>
);
}
답변
프로그래밍 방식으로 데이터를 클립 보드에 쓰려면 버튼에이 간단한 인라인 onClick 함수를 사용하십시오.
onClick={() => {navigator.clipboard.writeText(this.state.textToCopy)}}
답변
위의 @Shubham과 같은 패키지를 사용하는 것이 좋습니다.하지만 http://codepen.io/dtschust/pen/WGwdVN?editors=1111의 설명에 따라 작동하는 코드 펜을 만들었습니다 . 그것은 내 브라우저에서 크롬으로 작동합니다. 아마도 내가 놓친 것이 있거나 응용 프로그램에 확장 된 복잡성이있어 작동하지 못하게하는 것을 알 수 있습니다.
// html
<html>
<body>
<div id="container">
</div>
</body>
</html>
// js
const Hello = React.createClass({
copyToClipboard: () => {
var textField = document.createElement('textarea')
textField.innerText = 'foo bar baz'
document.body.appendChild(textField)
textField.select()
document.execCommand('copy')
textField.remove()
},
render: function () {
return (
<h1 onClick={this.copyToClipboard}>Click to copy some text</h1>
)
}
})
ReactDOM.render(
<Hello/>,
document.getElementById('container'))
답변
가장 간단한 방법은 react-copy-to-clipboard
npm 패키지를 사용하는 것 입니다.
다음 명령으로 설치할 수 있습니다
npm install --save react react-copy-to-clipboard
다음과 같이 사용하십시오.
const App = React.createClass({
getInitialState() {
return {value: '', copied: false};
},
onChange({target: {value}}) {
this.setState({value, copied: false});
},
onCopy() {
this.setState({copied: true});
},
render() {
return (
<div>
<input value={this.state.value} size={10} onChange={this.onChange} />
<CopyToClipboard text={this.state.value} onCopy={this.onCopy}>
<button>Copy</button>
</CopyToClipboard>
<div>
{this.state.copied ? <span >Copied.</span> : null}
</div>
<br />
<input type="text" />
</div>
);
}
});
ReactDOM.render(<App />, document.getElementById('container'));
자세한 설명은 다음 링크에서 제공됩니다
https://www.npmjs.com/package/react-copy-to-clipboard
여기는 바이올린을 실행 합니다.
답변
이처럼 하나의 버튼 안에 모든 것을 얻을 수있을 때 왜 npm 패키지가 필요합니까?
<button
onClick={() => navigator.clipboard.writeText('Copy this text to clipboard')}
>
Copy
</button>
이것이 @jerryurenaa에 도움이되기를 바랍니다.
답변
이벤트 클립 보드 만 사용하지 않는 이유 e.clipboardData.setData(type, content)
않습니까?
내 의견으로는 클립 보드 내부에서 smth를 밀어 넣는 가장 강력한 방법이라고 생각하십시오.
...
handleCopy = (e) => {
e.preventDefault();
e.clipboardData.setData('text/plain', 'Hello, world!');
}
render = () =>
<Component
onCopy={this.handleCopy}
/>
나는 그 길을 따라 갔다 : https://developer.mozilla.org/en-US/docs/Web/Events/copy
건배!
편집 : 테스트 목적으로 코드 펜을 추가했습니다 : https://codepen.io/dprzygodzki/pen/ZaJMKb
답변
코드가 완벽하게 작동해야합니다. 동일한 방식으로 사용합니다. 부트 스트랩 모달과 같은 팝업 화면에서 클릭 이벤트가 트리거되는 경우 생성 된 요소가 해당 모달 내에 있어야합니다. 그렇지 않으면 복사되지 않습니다. 항상 해당 모달 내의 요소 ID를 두 번째 매개 변수로 제공하고 getElementById로 검색 한 다음 새로 작성된 요소를 문서 대신 해당 요소에 추가 할 수 있습니다. 이 같은:
copyToClipboard = (text, elementId) => {
const textField = document.createElement('textarea');
textField.innerText = text;
const parentElement = document.getElementById(elementId);
parentElement.appendChild(textField);
textField.select();
document.execCommand('copy');
parentElement.removeChild(textField);
}