ReactJs 中的复制到剪贴板不适用于弹出窗口/模态

Question

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

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 中是否有此命令的替代方法，或者如何获得焦点？

谢谢你。

Answer 1

有一个解决方法。

无需将新输入附加到body元素，您可以将其 append 到您的模态元素或该模态内的其他容器。

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

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

Answer 2

如果您使用带有 enforceFocus 功能react-bootstrap之类的东西，则您将在模态之外添加元素，并且焦点被强制在模态上。

如果您不需要此功能，您可以将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”字符串。