如何在ReactJS

Question

我想让用户能够点击将当前URL复制到剪贴板的按钮。由于我使用react-router所有我需要的是提取this.props.history.location.pathname并将其附加到我的域名。

第二部分是将其保存到剪贴板。如何才能做到这一点？此外，解决方案仅限于某些浏览器吗？

Answer 1

react-copy-to-clipboard，提供将文本复制到剪贴板。

这是图书馆的工作演示：http://nkbt.github.io/react-copy-to-clipboard/

以下是使用该库的基本示例：

import { CopyToClipboard } from 'react-copy-to-clipboard'

render() {
  // Or if you prefer, you can use react-router API
  const url = window.location.href

  <CopyToClipboard text={url}>
    <button>Copy URL to the clipboard</button>
  </CopyToClipboard>
}

Answer 2

如果您不想使用库，可以非常轻松地手动完成：

您需要input元素才能执行此操作。元素需要保存要复制的值。然后，要触发副本，您需要突出显示该文本并执行document.execCommand("copy")。这会将输入值存储到用户的剪贴板中。

如果您不希望输入元素可见，您可以将position: absolute与一些top和left值一起提供，并将其发送到no-mans-land，就像我在下面所做的那样：

class MyApp extends React.Component {
  constructor() {
    super();
    this.copy = this.copy.bind(this);
  }

  copy() {
    this.elRef.select();
    document.execCommand("copy");
  }

  render() {
    return (
      <div>
        <input id="url-input" ref={el => this.elRef = el} value={this.props.url} />
        <button onClick={this.copy}>Copy</button>
      </div>
    )
  }
}

ReactDOM.render(<MyApp url="http://google.com" />, document.getElementById("app"));

#url-input {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

或者，您可以使用javascript创建临时DOM节点，将其附加到正文，然后在复制完成后将其删除。

class MyApp extends React.Component {
  constructor() {
    super();
    this.copy = this.copy.bind(this);
  }

  copy() {
    const el = document.createElement('input');
    el.value = this.props.url;
    el.id = "url-input";
    document.body.appendChild(el);
    el.select();
    document.execCommand("copy");
    el.remove();
  }

  render() {
    return <button onClick={this.copy}>Copy</button>
  }
}

ReactDOM.render(<MyApp url="http://google.com" />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>