ReactJS - 剪貼簿事件處理程式

---

---

ClipboardEvent 處理程式函式用於響應 web 應用中的事件，例如複製、剪下和貼上文字。這些函式與我們在執行這些操作時發生的特定事件相關聯。

讓我們分解一下如何在 React 中建立和使用 ClipboardEvent 處理程式函式：

建立 React 元件

首先，我們需要建立一個 React 元件，我們希望在其中實現剪貼簿事件處理。此元件應擴充套件 React.Component 或使用函式元件語法。

定義事件處理程式函式

在我們的元件中，我們將定義一個函式來處理剪貼簿事件。在這個例子中，我將其命名為 handleCopy，它接受一個事件引數。

handleCopy = (event) => {
   // logic to handle the copy event come here
   console.log('Text copied:', window.getSelection().toString());
}

<div onCopy={this.handleCopy}>
   This is some sample text.
</div>

語法

<input
   onCopy={e => console.log('onCopy event done')}
   onCut={e => console.log('onCut event done')}
   onPaste={e => console.log('onPaste event done')}
/>

ClipboardEvent 介面包含提供有關剪貼簿更改資訊的事件，例如剪下、複製和貼上。

事件

這些處理程式對應於特定事件：

onCopy - 當我們的文字或資料複製到剪貼簿時觸發。

onCut - 當我們的文字或資料從剪貼簿剪下時觸發。

onPaste - 當文字或資料從剪貼簿貼上時觸發。

用例

剪貼簿事件處理程式通常用於線上應用程式中，以提供易於使用的功能，例如：

• 在使用者複製、剪下或貼上文字時通知使用者。

• 更改複製、剪下和貼上操作的行為。

• 訪問和處理剪貼簿資料以用於各種應用程式。

示例

以下是一些在 React 應用程式中使用這些事件處理程式的示例：

示例 - 具有剪貼簿功能的文字編輯器

在這個示例應用程式中，我們建立了一個名為 App 的小型 React 元件。我們在這個元件中定義了三個事件處理程式函式：handleCopy、handleCut 和 handlePaste。每個函式都記錄有關剪貼簿事件的資料，例如複製、剪下或貼上的文字。

使用 onCopy、onCut 和 onPaste 屬性，我們將這些事件處理程式附加到輸入元素。當我們在輸入欄位中複製、剪下或貼上時，相關的事件處理程式會將資訊傳送到控制檯。

import React from 'react';

function App() {
   
   // Define event handler functions
   const handleCopy = (e) => {
      console.log('Text copied to clipboard: ', e.clipboardData.getData('text'));
   };
   const handleCut = (e) => {
      console.log('Text cut to clipboard: ', e.clipboardData.getData('text'));
   };
   const handlePaste = (e) => {
      console.log('Text pasted from clipboard: ', e.clipboardData.getData('text'));
   };   
   return (
      <div>
         {/* Attach the event handlers */}
         <input onCopy={handleCopy} onCut={handleCut} onPaste={handlePaste} />
      
         <p>Try copying, cutting, or pasting text in the input field.</p>
      </div>
   );
}

export default App;

輸出

當我們執行這個 React 應用程式時，它將顯示一個簡單的使用者介面，其中包含一個輸入欄位。因此，我們可以透過複製、剪下或貼上來在輸入區域中輸入文字。當我們這樣做時，相關的事件處理程式（handleCopy、handleCut 和 handlePaste）被呼叫，並且參與剪貼簿操作的文字被記錄到控制檯。

示例 - 具有剪貼簿功能的文字編輯器

這是一個名為“購物清單”的 React 應用程式。它為使用者提供了一個簡單的介面來管理他們想要購買的商品清單。以下是應用程式的關鍵元件：

import React, { useState } from 'react';

function ShoppingList() {
   const [items, setItems] = useState([]);   
   const addItem = (item) => {
      setItems([...items, { name: item, purchased: false }]);
   };   
   const markPurchased = (index) => {
      const updatedItems = [...items];
      updatedItems[index].purchased = !updatedItems[index].purchased;
      setItems(updatedItems);
   };   
   const handleCopyList = () => {
      const listString = JSON.stringify(items);
      navigator.clipboard.writeText(listString);
   };   
   const handlePasteList = async () => {
      const pastedText = await navigator.clipboard.readText();
      try {
         const pastedItems = JSON.parse(pastedText);
         setItems(pastedItems);
      } catch (error) {
         // Handle error
      }
   };   
   return (
      <div>
         <h2>Shopping List</h2>
         <ul>
            {items.map((item, index) => (
               <li key={index}>
                  <input type="checkbox" checked={item.purchased} onChange={() => markPurchased(index)} />
                  {item.name}
               </li>
            ))}
         </ul>
         <div>
            <input type="text" placeholder="Add Item" onKeyDown={(e) => e.key === 'Enter' && addItem(e.target.value)} />
            <button onClick={handleCopyList}>Share List</button>
            <button onClick={handlePasteList}>Import List</button>
         </div>
      </div>
   );
}

export default ShoppingList;

輸出

總的來說，此應用程式為使用者提供了一種簡單的方法來管理他們的購物清單，將商品標記為已購買，新增新商品以及與他人共享或匯入清單。

示例 - 具有剪貼簿功能的密碼生成器

這是一個名為“密碼生成器”的簡單 React 應用程式。其目的是根據所選長度生成隨機密碼，並允許使用者將生成的密碼複製到剪貼簿。以下是應用程式的程式碼：

import React, { useState } from 'react';

function PasswordGenerator() {
   const [password, setPassword] = useState('');
   const [passwordLength, setPasswordLength] = useState(16);   
   const generatePassword = () => {
      const characters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+{}:<>?/';
      let result = '';
      for (let i = 0; i < passwordLength; i++) {
         result += characters.charAt(Math.floor(Math.random() * characters.length));
      }
      setPassword(result);
   };   
   const handleCopy = () => {
      navigator.clipboard.writeText(password);
   };   
   return (
      <div>
         <h2>Password Generator</h2>
         <input type="number" value={passwordLength} onChange={(e) => setPasswordLength(Number(e.target.value))} />
         <button onClick={generatePassword}>Generate Password</button>
         <p>{password}</p>
         <button onClick={handleCopy}>Copy to Clipboard</button>
      </div>
   );
}

export default PasswordGenerator;

輸出

總的來說，此應用程式提供了一種簡單易用的方法來生成安全的密碼，並能夠將其複製到剪貼簿以便輕鬆使用。使用者還可以根據他們的安全要求自定義密碼長度。

總結

總的來說，ClipboardEvent 處理程式對於透過允許更改和分析剪貼簿操作來改進線上應用程式的使用者體驗至關重要。它們在需要唯一剪貼簿事件處理的情況下特別有用。