這里只講一個(gè)react的實(shí)現(xiàn)方式，我們使用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);

注意事項(xiàng)

npm 5以上，和cnpm安裝會(huì)有問(wèn)題?？梢試L試 yarn安裝，或者把 npm降級(jí)到 4,安裝完以后，在升級(jí)到5。

兼容性

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

參考網(wǎng)址

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。