最近は내 트리를 꾸며줘、롤링페이퍼のようにリンク共有型サービスが流行している.너가소개서というプロジェクトにも参加し、リンクのビューを作成し、クリップボードにテキストを格納する機能を開発しました.
似たようなサービスを開発したいフロントエンドの開発者なら、役に立ちます!

本題

Webブラウザでは、クリップボードにテキストを格納できるAPIはDocument.execCommand()、Clipboardであり、前者は破棄され、後者は代替のために設計されている.
そこで、Clipboard APIの使い方について説明します.
Clipboard APIは、navigator.clipboardを介してグローバルからアクセスすることができる.
ここで確認できる方法はいくつかありますが、そのうちのwriteText()を使用します.
これは、パラメータとして入力されたstring値をクリップボードに格納する方法です.
copyClipboard.ts

export const copyClipboard = async (
  text: string,
  successAction?: () => void,
  failAction?: () => void,
) => {
  try {
    await navigator.clipboard.writeText(text);
    successAction && successAction();
  } catch (error) {
    failAction && failAction();
  }
};

copyClipboardという実用的な関数を作成し、プロジェクトに必要な場所に使用しました.
コピーするstring値とコピーが成功/失敗したときに実行する関数をパラメータとして受け入れます.
これらの関数は単独で指定する必要はありません.(パディングパラメータ)writeText()は、Promiseによってクリップボードのコンテンツ更新プロセスを非同期で処理する.
したがって、copyClipboardをasync関数に設定して、成功/失敗の処理を行います.
関数内でactionを処理するのではなく、リクエストが成功したかどうかに基づいてtrue/false値を返し、その値によって外部から自由にactionを決定するhook(reaction)を作成してみます.
問題があったらこのように修正します.この内容は最後にもう一度検討します!

使用例

リンクの作成に成功/失敗した場合、結果をトーストで知らせる必要があるので、action関数で西晋が作ったトースト関数。を追加しました.

import { IcLinkCopy } from '@assets/icons'; // svg 컴포넌트

생략

<StLinkBox>
  <input type="text" value={link} disabled />
  <div></div>
  <IcLinkCopy
  	onClick={() =>
          copyClipboard(
            link,
            () => fireToast({ content: '링크가 클립보드에 저장되었습니다.', bottom: 190 }),
            () => fireToast({ content: '다시 시도해주세요.', bottom: 190 }),
          )
        }
   />
</StLinkBox>

생략

以上のコードの中のすべての星型素子、link値生成などに関する内容はすべてアップロードできません.コードが広すぎるので含まれませんが、気になる人がいたら、メッセージを残してください.

結果

実際にコピーして貼り付けているのは捉えられていませんが、実際にコピーすると効果的です!

失敗した方法を試みる

前述したように、最初に共通して使用された関数は、レプリケーションが成功したかどうかのみを示し、外部でactionを自由に処理することができます.
それはhookを作成し実現し、isCopyという状態を返します.
useCopyClipboard.ts

import { useState } from 'react';

export default function useCopyClipboard(): [
  boolean,
  React.Dispatch<React.SetStateAction<boolean>>,
  (text: string) => Promise<boolean>,
] {
  const [isCopy, setIsCopy] = useState<boolean>(false);
  const copyClipboard = async (text: string) => {
    try {
      await navigator.clipboard.writeText(text);
      setIsCopy(true);
      return true;
    } catch (error) {
      console.error(error);
      setIsCopy(false);
       return false;
    }
  };
  return [isCopy, setIsCopy, copyClipboard];
}

ただし、1つのビューで連続的にコピーする場合は、isCopyをfalseに初期化する必要があります.
また、isCopyによれば、USEffectを使用して動作を実行していますが、マウント時にその動作の実行エラーをキャプチャすることは困難です.ううう

const [isCopy, setIsCopy, copyClipboard] = useCopyClipboard();

useEffect(() => {
  if (isCopy) {
    fireToast({ content: '링크가 클립보드에 저장되었습니다.', bottom: 190 });
    setIsCopy(false);
  } else {
    fireToast({ content: '다시 시도해주세요.', bottom: 190 });
  }
}, [isCopy]);