copytoClipboard в reactjs

Question

У меня есть 1 тэг абзаца. Моя цель - скопировать содержимое тэга

. Следующий код прекрасно работает для копирования текста из текстовой области. Я хочу реализовать это для тега параграфа, а не для тега textarea. Я хочу изменить текст кнопки на «скопированный» после копирования содержимого. Заранее спасибо.

 <p id="content">Hi hello world</p>
 <textarea ref={(textarea) => this.textArea = textarea}/>
 <button onClick={() => this.copyCodeToClipboard()}> Copy </button>

   copyCodeToClipboard = () => {
     const el = this.textArea;
     el.select();
    document.execCommand("copy");
  }

Answer 1

Та же концепция, вам просто нужно установить состояние для изменения текста кнопки:

class App extends React.Component {
  constructor(props) {
    super(props)
    this.textRef = React.createRef()
    this.state = {
      isCopied: false
    }
  }

  copyCodeToClipboard = () => {
    // Clipboard API adds more flexibility
    navigator.clipboard.writeText(this.textRef.current.textContent)
    this.setState({
      isCopied: true
    })
    setTimeout(
      () =>
        this.setState({
          isCopied: false
        }),
      1000 // Time before button text change
    )
  }

  render() {
    return (
      <div className="App">
        <p ref={this.textRef}>Hi hello world</p>
        <button onClick={() => this.copyCodeToClipboard()}>
          {this.state.isCopied ? "Copied" : "Copy"}{" "}
        </button>
        <br />
        <br />
        <input placeholder="Paste here to test" />
      </div>
    )
  }
}

ReactDOM.render( <App /> , document.getElementById('root'))

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Answer 2

Я не уверен, что вы можете скопировать из абзаца. Что вы можете попробовать, хотя это

1. Создание текстовой области на лету.
2. Назначьте ему внутренний текст параграфа,
3. Добавьте текстовую область в документ .body
4. Выполнить копию на нем
5. И немедленно удалить его.

См. пример фрагмента ниже

    function copyText() {
      const textEl = document.createElement('textarea');
      const paragraph = document.getElementById('ptag');

      textEl.value = paragraph.innerHTML;

      document.body.appendChild(textEl);

      textEl.select();
      document.execCommand('copy');

      document.body.removeChild(textEl);
    }

Вы должны знать, что это если в абзаце есть дочерние элементы, и вы не хотите их копировать, вы можете их очистить. Простой метод, подобный этому, может удалить теги.

htmlElement.replace(/(<([^>]+)>)/ig, ' ');

Вы должны запустить его на innerText, прежде чем присваивать значение textArea.