當前位置:
首頁 >
react复制内容到剪贴板
發布時間:2023/12/31
35
豆豆
生活随笔
收集整理的這篇文章主要介紹了
react复制内容到剪贴板
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這里只講一個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复制内容到剪贴板的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: react设置默认props
- 下一篇: 获取cookie里面的值