Question

我研究，研究并没有找到解决方法...

我下面有一个由按钮调用的函数……一切正常，但是“ document.execCommand（'copy'）”根本不起作用！

如果我创建另一个按钮并仅在单独的函数中调用'if'的内容，则它可以完美运行...

我已经尝试在第一个函数中调用第二个函数，但是它也不起作用...仅当该函数中单独存在时，副本才起作用。

有人知道发生了什么事吗？

谢谢。

Uncaught TypeError: Cannot read property './src/wasm/hello_world.wasm' of undefined

Answer 1

您可以使用lib react-copy-to-clipboard复制文本。

import {CopyToClipboard} from 'react-copy-to-clipboard'; function(props) { return ( <CopyToClipboard text={'Text will be copied'}> <button>Copy button</button> </CopyToClipboard> ); }

如果您单击按钮Copy button，它将复制文本Text will be copied

Answer 2

问题是copy-to-clipboard功能只能直接作为用户click事件侦听器的结果而起作用...该事件无法虚拟化，并且execCommand除了立即执行之外，其他任何地方都无法工作分配给事件侦听器的回调... 因为react虚拟化和抽象了“事件”，所以问题就很可能出在这里，按照建议，您应该使用React的react-copy-to-clipboard。

Answer 3

基于react-copy-to-clipboard的lib copy-to-clipboard对我有用，但是如果要将源复制到自己的文件中，则需要注意一些地方。下面的代码可以正常工作。

import React, { Component } from 'react'
class App extends Component {
  render() {
    return (
      <div className="App">
        <h1
          onClick={e => {
            const range = document.createRange()
            const selection = document.getSelection()
            const mark = document.createElement('span')
            mark.textContent = 'text to copy'
            // reset user styles for span element
            mark.style.all = 'unset'
            // prevents scrolling to the end of the page
            mark.style.position = 'fixed'
            mark.style.top = 0
            mark.style.clip = 'rect(0, 0, 0, 0)'
            // used to preserve spaces and line breaks
            mark.style.whiteSpace = 'pre'
            // do not inherit user-select (it may be `none`)
            mark.style.webkitUserSelect = 'text'
            mark.style.MozUserSelect = 'text'
            mark.style.msUserSelect = 'text'
            mark.style.userSelect = 'text'
            mark.addEventListener('copy', function(e) {
              e.stopPropagation()
            })

            document.body.appendChild(mark)

            // The following line is very important
            if (selection.rangeCount > 0) {
              selection.removeAllRanges()
            }

            range.selectNodeContents(mark)
            selection.addRange(range)
            document.execCommand('copy')
            document.body.removeChild(mark)
          }}
        >
          Click to Copy Text
        </h1>
      </div>
    )
  }
}

export default App

import React, { Component } from 'react'
class App extends Component {
  render() {
    return (
      <div className="App">
        <h1
          onClick={e => {
            const mark = document.createElement('textarea')
            mark.setAttribute('readonly', 'readonly')
            mark.value = 'copy me'
            mark.style.position = 'fixed'
            mark.style.top = 0
            mark.style.clip = 'rect(0, 0, 0, 0)'
            document.body.appendChild(mark)
            mark.select()
            document.execCommand('copy')
            document.body.removeChild(mark)

          }}
        >
          Click to Copy Text
        </h1>
      </div>
    )
  }
}

export default App

document.execCommand（'copy'）在React中不起作用

3 个答案: