document.execCommand ('copy') 在 React 中不起作用

Question

我有下面的功能，点击按钮时调用。一切正常，但document.execCommand ('copy')根本不起作用。

如果我创建另一个按钮并仅调用if单独函数中的内容，则效果很好。

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

有谁知道发生了什么？

copyNshort = () => {
    const bitly = new BitlyClient('...') // Generic Access Token bit.ly
    let txt = document.getElementById('link-result')

    bitly.shorten(txt.value)
        .then((res) => {
            this.setState({ shortedLink: res.url })

            if (this.state.shortedLink !== undefined) {
                document.getElementById('link-result-shorted').select() // get textarea value and select
                document.execCommand('copy') // copy selected
                console.log('The link has been shortened and copied to clipboard!')
                ReactDOM.render(<i className="fas fa-clipboard-check"></i>, document.getElementById('copied'))
            }
            console.log('Shortened link ', res.url) // Shorted url
        })
}

Answer 1

问题是该copy-to-clipboard功能只能作为用户click事件侦听器的直接结果工作......这个事件不能被虚拟化，除了分配给事件侦听器的立即回调之外，execCommand 不会在任何其他地方工作......因为反应虚拟化和抽象“事件”，那么这很可能是问题所在，建议您应该使用 React 的react-copy-to-clipboard.