Thiết lập chức năng Sao chép vào khay nhớ tạm
Trong ứng dụng React, tạo một thành phần mới có tên CopyButton. Thành phần này chấp nhận văn bản mà nó sẽ sao chép vào bảng tạm.
Nếu bạn không có dự án React để thực hiện, hãy sử dụng tiện ích ứng dụng React để xây dựng một dự án.
function CopyButton({text}) {
const copyToClipboard = () => {
// copy to clipboard
}
return (
<button onClick={copyToClipboard}>Copy</button>
)
}
export default CopyButton
Khi được nhấp vào, nút này sẽ gọi một hàm có tên copyToClipboard để sao chép văn bản vào khay nhớ tạm.
Để triển khai chức năng sao chép, bạn có thể sử dụng trực tiếp API clipboard hoặc sử dụng gói NPM.
Hướng dẫn này sẽ chỉ cho bạn cách sử dụng cả hai.
Sử dụng API Clipboard để sao chép văn bản vào bảng nhớ tạm trong React
API Clipboard cung cấp cách tương tác với các lệnh clipboard như copy, cut, và paste.
Để truy cập nó, bạn cần sử dụng đối tượng navigator.clipboard có sẵn trong hầu hết các trình duyệt hiện đại. Nó có một số phương pháp cho phép bạn viết hoặc đọc nội dung của bảng nhớ tạm.
Để ghi vào clipboard, hãy sử dụng phương thức writeText.
Hãy xem cách triển khai điều này trong hàm copyToClipboard của thành phần CopyButton.
const copyToClipboard = async (text) => {
try {
await navigator.clipboard.writeText(text);
alert('Text copied to clipboard:', text);
} catch (error) {
alert('Error copying to clipboard:', error);
}
};
Phương thức writeText chấp nhận văn bản mà nó sẽ sao chép vào khay nhớ tạm. Phương thức này không đồng bộ nên bạn phải sử dụng từ khóa await trước khi tiếp tục.
Nếu văn bản được sao chép vào khay nhớ tạm, hãy hiển thị thông báo thành công, nếu không thì hiển thị thông báo lỗi dưới dạng cảnh báo.
Kiểm tra quyền của trình duyệt
Bạn nên đảm bảo rằng người dùng đã cấp cho trình duyệt quyền truy cập vào bảng nhớ tạm. Bạn có thể kiểm tra xem người dùng đã cấp quyền clipboard-write hay chưa bằng cách sử dụng API Web navigator.permissions trước khi sao chép vào bảng nhớ tạm như hiển thị bên dưới.
const copyToClipboard = async () => {
try {
const permissions = await navigator.permissions.query({name: "clipboard-write"})
if (permissions.state === "granted" || permissions.state === "prompt") {
await navigator.clipboard.writeText(text);
alert('Text copied to clipboard!');
} else {
throw new Error("Can't access the clipboard. Check your browser permissions.")
}
} catch (error) {
alert('Error copying to clipboard:', error);
}
};
Trong hàm được sửa đổi ở trên, chỉ khi người dùng đã cấp quyền ghi vào khay tạm thì mới ghi vào đó. Nếu không, hàm sẽ báo lỗi.
Sử dụng gói NPM để sao chép vào khay nhớ tạm trong React
Nếu bạn không muốn sử dụng trực tiếp API clipboard, có nhiều gói NPM mà bạn có thể sử dụng thay thế. Đối với các ứng dụng React, bạn có thể sử dụng gói Reac-copy-to-clipboard. Nó khá phổ biến với hơn 1 triệu lượt tải xuống hàng tuần và cũng dễ sử dụng.
Cài đặt nó trong ứng dụng React của bạn bằng cách chạy lệnh sau trong terminal:
npm install react-copy-to-clipboard
Sau khi cài đặt, hãy nhập thành phần CopyToClipboard từ Reac-copy-to-clipboard vào thành phần CopyButton.
import {CopyToClipboard} from 'react-copy-to-clipboard';
Thành phần CopyToClipboard chấp nhận văn bản bạn muốn sao chép dưới dạng prop. Nó cũng chấp nhận một thành phần con mà khi được nhấp vào sẽ kích hoạt hành động sao chép.
Ví dụ: sử dụng code bên dưới để sao chép vào khay nhớ tạm bằng một nút:
<CopyToClipboard text={text} onCopy={(text, result) => console.log(result)}>
<button>Copy</button>
</CopyToClipboard>
Lưu ý hàm handler onCopy. Nó chấp nhận hai đối số, text và result trong đó text là văn bản được sao chép và result là một boolean cho biết hành động sao chép có thành công hay không.
Tại sao nên sử dụng chức năng Sao chép vào khay nhớ tạm?
Bạn đã học cách sử dụng API clipboard và gói Reac-copy-to-clipboard để sao chép văn bản vào bảng nhớ tạm trong ứng dụng React. Mặc dù người dùng ứng dụng của bạn có thể chỉ cần chọn văn bản và sử dụng chức năng sao chép của trình duyệt, nhưng việc nhấp để sao chép văn bản sẽ đơn giản hơn và mang lại trải nghiệm tốt hơn cho người dùng.
Tìm hiểu ngay chương trình học công nghệ thông tin trực tuyến tại FUNiX ở đây:
Vân Nguyễn
Dịch từ: https://www.makeuseof.com/copy-to-clipboard-feature-react/
Bình luận (0
)