javascript - 在 React 中将 p 标签之间的文本复制到剪贴板

Question

我正在尝试创建复制到剪贴板组件。这是我的代码:

import React from 'react';
import logo from './logo.svg';
import './App.css';

class CopyClipboard extends React.Component {

  constructor(props) {
    super(props);

    this.state = { copySuccess: 'Copy to Clipboard!' }
  }

  copyToClipboard = (e) => {

    this.textContent.select();
    document.execCommand('copy');
    e.target.focus();
    this.setState({ copySuccess: 'Copied to Clipboard!' });
  };

  render() {
    return (
      <div class="positioning">
        {
           //if i need
        }

          <p onClick={this.copyToClipboard} ref={(c) => (this.textContent = c)}>yotam@gmail.com</p>
        <div class="success">{this.state.copySuccess}</div>
      </div>
    );
  }

}

export default CopyClipboard;

我收到解析错误:意外的 token 错误。但如果我使用 input 标签，那么它的工作正常。我哪里做错了？

Answer 1

对于 p 标签，不能使用 .select。

您需要使用selectNode和addRange

尝试像这样的选择功能

copyToClipboard = async e => {
  window.getSelection().removeAllRanges();
  var range = document.createRange();
  range.selectNode(this.textContent);
  window.getSelection().addRange(range);
  document.execCommand("copy");
  window.getSelection().removeAllRanges();
  this.setState({ copied: true });
};

Click here也有一个工作示例

还有check out this answer选择非输入标签之间的文本。