Clipboard API: การคัดลอกและวางใน React

navigator.clipboard.writeText(text) จะเขียนสตริงลงในคลิปบอร์ดของระบบและคืนค่าเป็นพรอมิส นี่เป็นวิธีทดแทนสมัยใหม่สำหรับแนวทางเดิมอย่าง execCommand ควร await พรอมิสเสมอและจัดการการปฏิเสธที่อาจเกิดขึ้น เช่น เมื่อผู้ใช้ปฏิเสธการเข้าถึงคลิปบอร์ด

navigator.clipboard.readText() จะอ่านเนื้อหาปัจจุบันของคลิปบอร์ดเป็นสตริงและคืนค่าเป็นพรอมิสเช่นกัน การอ่านต้องใช้สิทธิ์ clipboard-read ซึ่งเบราว์เซอร์จะแจ้งให้ผู้ใช้อนุญาต ในทางปฏิบัติ การอ่านคลิปบอร์ดมักใช้น้อยกว่าการเขียนในแอปพลิเคชัน React ทั่วไป

เบราว์เซอร์กำหนดให้เรียก clipboard.writeText ได้เฉพาะภายในตัวจัดการการโต้ตอบของผู้ใช้ เช่น เหตุการณ์คลิกหรือการกดแป้น การเรียกใช้ภายใน useEffect หรือแบบอะซิงโครนัสหลังการโต้ตอบจะทำให้เกิดข้อผิดพลาดด้านความปลอดภัย ควรเรียกการเขียนโดยตรงจากตัวจัดการ onClick เสมอ

รูปแบบมาตรฐานคือ ผู้ใช้คลิกปุ่มคัดลอก ตัวจัดการของคุณเรียก navigator.clipboard.writeText(value) เมื่อสำเร็จ ให้กำหนดสถานะ copied เป็น true และให้ปุ่มแสดงเครื่องหมายถูกหรือป้ายกำกับ "คัดลอกแล้ว!" ชั่วคราว หลังจากหน่วงเวลาสั้น ๆ ปุ่มจะกลับสู่สถานะปกติ

ห่อหุ้มตรรกะไว้ในฮุก useCopyToClipboard ที่คืนค่าเป็นทูเพิล: [copied, copyFn] ค่าบูลีน copied ใช้ควบคุมการตอบสนองบนส่วนติดต่อ ส่วน copyFn รับข้อความที่จะคัดลอก ฮุกจะจัดการการเขียนแบบอะซิงโครนัสและข้อผิดพลาดภายใน เพื่อให้คอมโพเนนต์เรียบง่าย

ภายในฮุก หลังจากคัดลอกสำเร็จ ให้เรียก setCopied(true) และกำหนดเวลาสำหรับรีเซ็ตด้วย setTimeout(() => setCopied(false), 2000) เก็บรหัสประจำตัวของตัวจับเวลาไว้และล้างค่าดังกล่าวในการล้างข้อมูลของ useEffect เพื่อป้องกันการอัปเดตสถานะหลังถอดคอมโพเนนต์ออก วิธีนี้หลีกเลี่ยงคำเตือน "ไม่สามารถอัปเดตสถานะของคอมโพเนนต์ที่ถอดออกแล้วได้"

เบราว์เซอร์รุ่นเก่าและหน้าเว็บที่ไม่ใช่ HTTPS ไม่รองรับ Clipboard API ค่าทดแทนแบบเดิมจะสร้าง textarea ชั่วคราว กำหนดค่าให้ เพิ่มลงในส่วนเนื้อหาของหน้า เรียก document.execCommand('copy') แล้วลบอิลิเมนต์ออก วิธีนี้ทำงานแบบซิงโครนัสและใช้ได้ทุกที่ แม้จะเลิกแนะนำแล้วก็ตาม

ก่อนใช้ Clipboard API ให้ตรวจสอบดังนี้: navigator.clipboard && typeof navigator.clipboard.writeText === 'function' หากไม่พร้อมใช้งาน ให้ใช้แนวทางเดิมอย่าง execCommand เป็นค่าทดแทน การตรวจสอบเชิงป้องกันนี้ป้องกันข้อผิดพลาดขณะทำงานในสภาพแวดล้อมที่ไม่รองรับ API

การอ่านคลิปบอร์ดต้องได้รับสิทธิ์จากผู้ใช้ผ่าน Permissions API คุณสามารถสอบถามสถานะปัจจุบันได้ดังนี้: navigator.permissions.query({ name: 'clipboard-read' }) จะคืนค่า PermissionStatus ที่มี state เป็น granted, denied หรือ prompt เบราว์เซอร์จะแจ้งขอสิทธิ์โดยอัตโนมัติเมื่อคุณเรียก readText()

Clipboard API ใช้งานได้เฉพาะในบริบทที่ปลอดภัย (HTTPS หรือ localhost) บนหน้า HTTP ค่า navigator.clipboard จะเป็น undefined นี่เป็นข้อจำกัดด้านความปลอดภัย เนื่องจากเนื้อหาในคลิปบอร์ดอาจมีข้อมูลละเอียดอ่อน ควรตรวจสอบความพร้อมใช้งานของ API ก่อนอ้างอิงเมธอดเสมอ เพื่อหลีกเลี่ยงข้อผิดพลาดจากการอ้างอิงค่า null

jsdom (ซึ่ง Jest ใช้งาน) ยังไม่รองรับ Clipboard API ให้จำลองไว้ในการตั้งค่าการทดสอบของ Jest: Object.assign(navigator, { clipboard: { writeText: jest.fn().mockResolvedValue(undefined) } }) วิธีนี้ช่วยให้คุณทดสอบได้ว่าคอมโพเนนต์เรียกใช้ writeText ด้วยอาร์กิวเมนต์ที่ถูกต้อง โดยไม่ต้องใช้สภาพแวดล้อมเบราว์เซอร์จริง

ในเบราว์เซอร์ คุณสามารถเรียกใช้ navigator.clipboard.writeText() ได้อย่างปลอดภัยเมื่อใด

ใช้ navigator.clipboard.writeText() ภายในตัวจัดการคลิกเพื่อคัดลอกข้อความ สร้างฮุก useCopyToClipboard ที่คืนค่า [copied, copyFn] พร้อมรีเซ็ตตามเวลา ตรวจสอบความพร้อมใช้งานของ API เสมอ จัดเตรียมทางเลือกสำรองด้วย execCommand สำหรับเบราว์เซอร์รุ่นเก่า และจำลอง navigator.clipboard ในการทดสอบของ Jest