react类组件 如何获取剪贴板内容

在React类组件中，要获取剪贴板的内容，通常可以使用React的refs来访问DOM元素，并调用其对应的原生JavaScript方法来读取剪贴板。不过需要注意的是，直接读取剪贴板内容涉及到用户隐私和安全问题，因此在Web应用中，必须在用户的显式操作（如点击事件）下才能进行。

下面是一个基本的实现示例：

首先，你需要创建一个引用（ref）指向你想要操作的DOM元素（例如一个input元素）。然后，在用户的事件处理函数中，通过这个ref获取到DOM元素，并调用`select()`方法来选中输入框中的文本，再通过`document.execCommand('copy')`来执行复制操作，最后再获取剪贴板内容。

import React, { Component } from 'react';

class ClipboardDemo extends Component {
  constructor(props) {
    super(props);
    this.clipboardInput = React.createRef();
  }

  copyToClipboard = () => {
    const inputElement = this.clipboardInput.current;
    // 选中文本
    inputElement.select();
    // 尝试复制文本到剪贴板
    try {
      const successful = document.execCommand('copy');
      if (successful) {
        alert('Content copied to clipboard');
      } else {
        console.log('Failed to copy');
      }
    } catch (err) {
      console.log('Error occurred while copying', err);
    }
  }

  render() {
    return (
      <div>
        <input
          type="text"
          ref={this.clipboardInput}
          value="需要复制的文本内容"
        />
        <button onClick={this.copyToClipboard}>复制到剪贴板</button>
      </div>
    );
  }
}

export default ClipboardDemo;

上面的代码中，我们定义了一个名为`ClipboardDemo`的React类组件，它有一个名为`copyToClipboard`的方法用于执行复制操作。我们创建了一个`input`元素，并用`ref`属性关联了一个通过`React.createRef()`创建的引用。在用户点击按钮时，触发`copyToClipboard`方法，选中`input`中的文本，并尝试将其复制到剪贴板。