Reactでコピー機能を実装する方法

react でコピー関数を実装する方法: 1. 「copy-to-clipboard」ライブラリを使用してコピー関数を実装します; 2. 「react-copy-to-clipboard」ライブラリを使用してコピーを実装します機能; 3. 「navigator」.clipboard.writeText(e)」メソッドでコピーを実現; 4. 「document.execcommand("copy")」メソッドでコピーを実現; 5. 「copy-」メソッドでコピー機能を実現js」ライブラリ。

このチュートリアルの動作環境: Windows 10 システム、react18 .0.0 バージョン、Dell G3 コンピューター。

#react で copy 関数を実装するにはどうすればよいですか?

React でのワンクリック コピー - 5 つの方法

クリップボード ライブラリへのコピー (推奨)
• 反応- copy-to-clipboard ライブラリ (推奨)
• navigator.clipboard.writeText(e) (推奨)
• document.execcommand("copy")
• copy-js ライブラリ

クリップボードにコピー

1. インストール方法

// npm安装---这种方式可能会对babel的版本有限制
npm i --save copy-to-clipboard


//cdn引入
<script src="https://wzrd.in/standalone/copy-to-clipboard@latest" async></script>

2. 利用方法

import copy from 'copy-to-clipboard';const handleClick = ()=>{
	copy('复制的内容');
	message.success('复制成功')}0ac49d3b14c40e8d204137d7fbf76f9d复制a1cb88e6789f399807801ea3799938af

react-copy-to-clipboard

この方法は copy-to-clipboard に基づいています。copy-to-clipboard のインストール時に他の npm パッケージにバージョン制限があることがわかった場合は、おそらくこれは機能しないでしょうが、試すことは不可能ではありません

1. インストール

npm i --save react-copy-to-clipboard

2. 使用方法 -

に注目すべき場所 がありますd2e6d4ef1056974ae0f1f1d2d4feed0954eaac8efc3be0e4829f8d3d1d1d0127、ルート要素は 1 つだけです。d2e6d4ef1056974ae0f1f1d2d4feed0954eaac8efc3be0e4829f8d3d1d1d0127 でルート要素がラップされている場合は、自分で試してみました。 div と button のような 2 つの兄弟ノードがある場合、コピーは有効になりません。理由はわかりません。興味のある友人はソース コードを確認してください。 <pre class="brush:php;toolbar:false">import { CopyToClipboard } from 'react-copy-to-clipboard';  43bbcd4e844b20bc078f8c9897b39d8a {      if (result) {        message.success('复制成功');      } else {        message.error('复制失败，请稍后再试');      }    }}  &gt;    a8a83f830be7ccf2b2ad5e838aba8303}    /&gt;  54eaac8efc3be0e4829f8d3d1d1d0127</pre>

document.execcommand("copy")—は非推奨になりましたしかし、一部のブラウザではまだ使用できるようです。ドキュメント

を参照してください。詳細 I

私はこの方法を使ったことがないので、どんな落とし穴があるのか​​わかりません。
使い方

42b48c43c2d811927b81b54d0c1f3424一键复制65281c5ac262bf6d81768915a4a77ac0const btn = document.querySelector('#btn');
  btn.addEventListener('click', () => {
      const textarea= document.createElement('textarea');
      textarea.setAttribute('readonly', 'readonly');
      textarea.value = 'xxxxx';
      document.body.appendChild(textarea);
      textarea.select();
      if (document.execCommand('copy')) {
          document.execCommand('copy');
          alert('复制成功');
      }
      document.body.removeChild(textarea);
  })

copy-jsライブラリこのライブラリを見つけたばかりで使ったことはありませんが、ソース コードも使用します

document.execcommand("copy")

1.

// npm包下载npm install copy-js --save// CDN导入adf581fd640ebe59dee87c508e6d19bb2cacc6d41bbb37262a98f745aa00fbf0

2 をインストールします。

import copy from 'copy-to-clipboard';copy('hello world', function(err) {
    if (err) console.log('Some thing went wrong!');
 
    console.log('Copied!');});

navigator を使用します。 Clipboard.writeText(e)このメソッドにも落とし穴があります。開発期間は比較的短く、その理由については具体的な検討がありません。

このメソッドのパラメータ e は、次の値を取得する必要があります。入力テキスト ボックスをコピーして、ノード

ただし、この方法は、一部のアプリケーションのインエンド ブラウザーでは制限がある可能性があります。通常のブラウザーでは使用できますが、たとえば、 Feishu エンドエンド ブラウザで利用可能ですが、クリップボード オブジェクトはありません。それはやはり使用シナリオによって異なります。

1. 使い方

const { Search } = Input;const copyLink = (e: any) => {
  navigator.clipboard.writeText(e).then(
    () => {
      message.success(intl.t('复制成功'));
      console.log(e);
    },
    () => {
      message.error(intl.t('复制失败，请稍后再试'));
    },
  );};


 462d3c01430fac045c2ece97525bf109

私がまだ考えていない方法もあるかもしれません

推奨学習: "

反応ビデオチュートリアル

>>

以上がReactでコピー機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。