在 ReactJs 中复制到剪贴板不适用于弹出窗口/模式答案

【问题标题】：Copy to Clipboard in ReactJs is not working for a popup window/modal在 ReactJs 中复制到剪贴板不适用于弹出窗口/模式
【发布时间】：2020-06-02 06:46:41
【问题描述】：

我正在尝试复制弹出窗口中存在的按钮单击事件的文本，但文本没有被复制。我尝试使用此代码在常规窗口上运行良好，但不适用于弹出窗口。这是代码：

handleClipBoard = () => {           
  var textField = document.createElement('textarea');            
  textField.value = 'text to be copied';         
  document.body.appendChild(textField);         
  textField.select();         
  textField.focus();  // i tried adding focus, It didn't work         
  document.execCommand('copy');             
  textField.remove(textField);          
}

在阅读了几篇文章后，我发现 document.execCommand('copy') 由于焦点问题而无法用于弹出窗口。在 ReactJs 中是否有此命令的替代方法，或者如何获得焦点？

谢谢。

【问题讨论】：

标签： javascript reactjs popupwindow clipboard.js

【解决方案1】：

有一个解决方法。

除了将新输入附加到 body 元素之外，您还可以将其附加到您的模态元素或该模态框内的其他容器中。

所以它应该与这样的东西一起使用：

const copyToClipboard = (textToCopy, containerElement = document.body) => {           
  const textField = document.createElement('textarea');            
  textField.value = textToCopy;
  containerElement.appendChild(textField);      
  textField.select();         
  document.execCommand('copy');             
  containerElement.removeChild(textField);          
}

【讨论】：

【解决方案2】：

如果您将 react-bootstrap 之类的东西与 enforceFocus 功能一起使用，则您将在 Modal 之外添加元素，并将焦点强制在 modal 上。

如果您不需要此功能，您可以将enforceFocus={false} 添加到您的模态构造中。这使您可以定位模态之外的元素并执行操作，例如在本例中复制它们。

例子：

<Modal show={props.show} onHide={props.close} dialogClassName="modal-lg"
    style={MODAL_STYLES} enforceFocus={false}>
  <Modal.Header closeButton>Example</Modal.Header>
  <Modal.Body>
    copyToClipboard("test");
  </Modal.Body>
</Modal>

如果没有将enforceFocus 设置为false，我将无法复制“test”字符串。

【讨论】：