[javascript] reactJS에서 텍스트를 클립 보드에 복사하는 방법은 무엇입니까?

Program / 글쓴이

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-clipboardnpm 패키지를 사용하는 것 입니다.

다음 명령으로 설치할 수 있습니다

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