這里只講一個react的實現方式，我們使用react-copy-to-clipboard

首先安裝 react-copy-to-clipboard

npm install --save react react-copy-to-clipboard

或者

cnpm install --save react react-copy-to-clipboard

或者

yarn add react-clipboard

使用 react-copy-to-clipboard

import React from 'react'; import ReactDOM from 'react-dom'; import {CopyToClipboard} from 'react-copy-to-clipboard';class App extends React.Component {state = {value: '',copied: false,};render() {return (<div><input value={this.state.value}onChange={({target: {value}}) => this.setState({value, copied: false})} /><CopyToClipboard text={this.state.value}onCopy={() => this.setState({copied: true})}><span>Copy to clipboard with span</span></CopyToClipboard><CopyToClipboard text={this.state.value}onCopy={() => this.setState({copied: true})}><button>Copy to clipboard with button</button></CopyToClipboard>{this.state.copied ? <span style={{color: 'red'}}>Copied.</span> : null}</div>);} }const appRoot = document.createElement('div'); document.body.appendChild(appRoot); ReactDOM.render(<App />, appRoot);

注意事項

npm 5以上，和cnpm安裝會有問題。可以嘗試 yarn安裝，或者把 npm降級到 4,安裝完以后，在升級到5。

兼容性

除了 opera 和 UC 瀏覽器支持性不好，其他瀏覽器兼容性都可以。

參考網址

這個可以看看npmjs 上面的具體解釋 https://www.npmjs.com/package/react-copy-to-clipboard

總結

以上是生活随笔為你收集整理的react复制内容到剪贴板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。