编辑：

Question

我有一个代码，可将React中的段落元素的文本值复制到剪贴板。

代码可以正常工作（将值复制到剪贴板），但是它会将值和两条换行符复制到剪贴板中。

例如，如果我要复制值“ 2345678”，它将复制：

import './CopyClipboard.css';

class CopyClipboard extends React.Component {
    constructor(props) {
        super(props);
        this.textContent = null;
        this.state = {
            copied: false
        };
    }

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

    initRef = c => (this.textContent = c);

    render() {
        const { copied } = this.state;
        return (
            <div className="positioning">
                <p onMouseLeave={() => this.setState({ copied: false })} onClick={this.copyToClipboard} ref={this.initRef}>
                    {this.props.value}
                </p>
                {copied === false ? <p className="success">Copy to Clipboard</p> : <p className="success">Copied!!!</p>}
            </div>
        );
    }
}

export default CopyClipboard;

也许有人可以理解我在这里做错了什么？

谢谢！

所以我设法使用@ChrisSandvik解决方案使其能够使用剪贴板聚合填充

代码：

import React from 'react';
import * as clipboard from "clipboard-polyfill";
import './CopyClipboard.css';

class CopyClipboard extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            copied: false
        };
    }

    copyText = e => {
        clipboard.writeText(this.props.value);
        this.setState({ copied: true });
    };

    render() {
        const { copied } = this.state;
        return (
            <div className="positioning">
                <p onMouseLeave={() => this.setState({ copied: false })} onClick={this.copyText} ref={this.initRef}>
                    {this.props.value}
                </p>
                {copied === false ? <p className="success">Copy to Clipboard</p> : <p className="success">Copied!!!</p>}
            </div>
        );
    }
}

export default CopyClipboard;

编辑2：

我发现了问题，传递的值还可以，但是<p></p>元素具有默认的CSS，它会影响检索时将获得的值。您可以使用<span>或覆盖<p>默认的CSS来解决它

Answer 1

我相信Venecovsky在换行符方面可能会走上正确的轨道。但是，在React中处理剪贴板内容时，我倾向于使用的另一个解决方案是使用clipboard-polyfil包。

这会将您的代码缩减为：

copyToClipboard = async e => {
    clipboard.writeText(this.props.value);
};

而且还保证可以在跨浏览器和跨设备上更好地工作。

您也不必处理裁判！

编辑：

我制作了一个工作且非常简单的演示，您可以在此处查看：https://codesandbox.io/s/strange-darkness-wzrjz

const ClipboardThing = props => {
  const copyText = e => {
    clipboard.writeText(props.value);
    changeButtonText(e.target, "Copied!");
  };

  const changeButtonText = (button, text) => {
    const original = button.textContent;
    button.textContent = text;
    setTimeout(() => {
      button.textContent = original;
    }, 1200);
  };

  return (
    <div>
      <p>{props.value}</p>
      <button onClick={copyText}>Copy Text</button>
    </div>
  );
};

function App() {
  return (
    <div className="App">
      <ClipboardThing value="test text" />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard-polyfill/2.8.1/clipboard-polyfill.js"></script>

<div id="root"></div>

Answer 2

编辑：

使用span代替p。

<span onMouseLeave={() => this.setState({ copied: false })} onClick={this.copyToClipboard} ref={this.initRef}>{this.props.value}</span >

旧：

尝试仅将其添加到一行中，而不缩进代码（删除代码的enter和spaces）。

<p onMouseLeave={() => this.setState({ copied: false })} onClick={this.copyToClipboard} ref={this.initRef}>{this.props.value}</p>

您可以检查的一件事是this.props.value.length，也许值已经包含了另外两行。

OR

您可以做的一件事是使用.trim删除多余的换行符。

复制到剪贴板正在复制带有两个换行符的值

2 个答案:

编辑：

旧：