Javascript 将p标记之间的文本复制到React中的剪贴板

我正在尝试创建“复制到剪贴板”组件。这是我的密码：

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;

我得到解析错误：意外的令牌错误。但如果我使用输入标记，那么它的工作就可以了。我哪里做错了

对于p标记，您不能使用。选择

您需要使用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 });
};

这也是一个有效的例子

---

还可以在非输入标记之间选择文本

@UweKeim你这是什么意思？应该是什么？但不是复制文本我不需要任何按钮。我需要当我点击文本，然后文本将被复制。并且文本应该有in-p标记。它可以工作。但我想显示，当鼠标悬停在文本上，然后它会显示复制到剪贴板后，点击它会显示复制到剪贴板。你可以肯定地看到我做了什么。非常感谢。我接受你的回答。如果我使用这样的条件：{copied==false？

复制到剪贴板

：

复制到剪贴板

}它可以工作。我用按钮尝试了这个方法，但它有两个返回。在您的codesandbox示例中也会这样做