Reactでコピー機能を実装する方法-フロントエンドQ&A-php.cn

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

藏色散人

リリース： 2022-12-30 11:27:47

オリジナル

2996 人が閲覧しました

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

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

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

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

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

反応- copy-to-clipboard ライブラリ (推奨)
navigator.clipboard.writeText(e) (推奨)
document.execcommand("copy")
copy-js ライブラリ

に注目すべき場所 があります<CopyToClipboard></CopyToClipboard>、ルート要素は 1 つだけです。<CopyToClipboard></CopyToClipboard> でルート要素がラップされている場合は、自分で試してみました。 div と button のような 2 つの兄弟ノードがある場合、コピーは有効になりません。理由はわかりません。興味のある友人はソースコードを確認してください。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">import { CopyToClipboard } from &#39;react-copy-to-clipboard&#39;; <CopyToClipboard text={&#39;复制的内容&#39;} onCopy={(_, result) => { if (result) { message.success(&#39;复制成功&#39;); } else { message.error(&#39;复制失败，请稍后再试&#39;); } }} > <Button type=&#39;primary&#39; icon={<CopyOutlined />} /> </CopyToClipboard></pre><div class="contentsignin">ログイン後にコピー</div></div>

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

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

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

<button id="btn"  style="margin-top: 40px;">一键复制</button>const btn = document.querySelector(&#39;#btn&#39;);
  btn.addEventListener(&#39;click&#39;, () => {
      const textarea= document.createElement(&#39;textarea&#39;);
      textarea.setAttribute(&#39;readonly&#39;, &#39;readonly&#39;);
      textarea.value = &#39;xxxxx&#39;;
      document.body.appendChild(textarea);
      textarea.select();
      if (document.execCommand(&#39;copy&#39;)) {
          document.execCommand(&#39;copy&#39;);
          alert(&#39;复制成功&#39;);
      }
      document.body.removeChild(textarea);
  })

ログイン後にコピー

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

document.execcommand("copy")

1.

// npm包下载npm install copy-js --save// CDN导入<script src="//cdn.rawgit.com/duyetdev/copy.js/master/dist/copy.min.js"></script>

ログイン後にコピー

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

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

ログイン後にコピー

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

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

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

1. 使い方

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


 <Search
   bordered={false}
   value={window.location.href}
   enterButton={intl.t(&#39;复制链接&#39;)}
   size=&#39;middle&#39;
   onSearch={copyLink}
 />

ログイン後にコピー

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

推奨学習: "

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

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