React復(fù)制到剪貼板的示例代碼

更新時(shí)間：2017年08月22日 16:43:56 作者：你期待的花開

本篇文章主要介紹了React復(fù)制到剪貼板的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

本文介紹了React復(fù)制到剪貼板可以使用插件copy-to-clipboard，分享給大家，具體如下：

安裝

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

使用

const App = React.createClass({
 getInitialState() {
  return {value: '', copied: false};
 },


 onChange({target: {value}}) {
  this.setState({value, copied: false});
 },


 onCopy() {
  this.setState({copied: true});
 },


 render() {
  return (
   <div>
    <h1>CopyToClipboard</h1>

    <input value={this.state.value} size={10} onChange={this.onChange} /> 

    <CopyToClipboard text={this.state.value} onCopy={this.onCopy}>
     <span>Copy to clipboard with span</span>
    </CopyToClipboard> 

    <CopyToClipboard text={this.state.value} onCopy={this.onCopy}>
     <button>Copy to clipboard with button</button>
    </CopyToClipboard> 


    {this.state.copied ? <span style={{color: 'red'}}>Copied.</span> : null}

    <br />

    <textarea style={{marginTop: '1em'}} cols="22" rows="3" />

   </div>
  );
 }
});

const appRoot = document.createElement('div');

appRoot.id = 'app';
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

react循環(huán)數(shù)據(jù)(列表)的實(shí)現(xiàn)
這篇文章主要介紹了react循環(huán)數(shù)據(jù)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04
React Native 環(huán)境搭建的教程
本篇文章主要介紹了React Native 環(huán)境搭建的教程，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
React?Fiber構(gòu)建源碼解析
這篇文章主要為大家介紹了React?Fiber構(gòu)建源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
React+Vite從零搭建項(xiàng)目及配置的實(shí)現(xiàn)
本文主要介紹了React+Vite從零搭建項(xiàng)目及配置的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2025-04-04
React useState的錯(cuò)誤用法避坑詳解
這篇文章主要為大家介紹了React useState的錯(cuò)誤用法避坑詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
react 移動端實(shí)現(xiàn)列表左滑刪除的示例代碼
這篇文章主要介紹了react 移動端實(shí)現(xiàn)列表左滑刪除的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07
create-react-app開發(fā)常用配置教程
這篇文章主要為大家介紹了create-react-app開發(fā)常用配置教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-06-06
React使用Electron開發(fā)桌面端的詳細(xì)流程步驟
React是一個(gè)流行的JavaScript庫，用于構(gòu)建Web應(yīng)用程序，結(jié)合Electron框架，可以輕松地將React應(yīng)用程序打包為桌面應(yīng)用程序，本文詳細(xì)介紹了使用React和Electron開發(fā)桌面應(yīng)用程序的步驟,需要的朋友可以參考下
2023-06-06
react-router中Link標(biāo)簽和a標(biāo)簽有什么區(qū)別
本文主要介紹了react-router中Link標(biāo)簽和a標(biāo)簽有什么區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-06-06
React??memo允許你的組件在?props?沒有改變的情況下跳過重新渲染的問題記錄
使用?memo?將組件包裝起來,以獲得該組件的一個(gè)?記憶化?版本,只要該組件的?props?沒有改變,這個(gè)記憶化版本就不會在其父組件重新渲染時(shí)重新渲染,這篇文章主要介紹了React??memo允許你的組件在?props?沒有改變的情況下跳過重新渲染,需要的朋友可以參考下
2024-06-06