API Papan Klip: Menyalin dan Menampal dalam React

navigator.clipboard.writeText(text) menulis rentetan ke papan keratan sistem dan mengembalikan janji. Ia ialah pengganti moden untuk pendekatan lama execCommand. Sentiasa await janji tersebut dan kendalikan kemungkinan penolakannya, contohnya apabila pengguna menolak akses papan keratan.

navigator.clipboard.readText() membaca kandungan semasa papan keratan sebagai rentetan dan turut mengembalikan janji. Pembacaan memerlukan kebenaran clipboard-read, yang akan diminta oleh pelayar daripada pengguna. Dalam amalan, pembacaan papan keratan kurang kerap digunakan berbanding penulisan dalam aplikasi React biasa.

Pelayar menetapkan bahawa clipboard.writeText hanya boleh dipanggil dalam pengendali gerak isyarat pengguna, seperti peristiwa klik atau penekanan kekunci. Memanggilnya di dalam useEffect atau secara tak segerak selepas gerak isyarat akan menghasilkan ralat keselamatan. Sentiasa cetuskan penulisan itu secara terus daripada pengendali onClick.

Corak standardnya ialah: pengguna mengklik butang salin, pengendali anda memanggil navigator.clipboard.writeText(value), selepas berjaya anda menetapkan keadaan copied kepada true, dan butang itu memaparkan tanda semak atau label “Disalin!” buat sementara. Selepas tempoh yang singkat, butang kembali kepada keadaan biasa.

Rangkumkan logik ini dalam cangkuk useCopyToClipboard yang mengembalikan tupel: [copied, copyFn]. Nilai boolean copied mengawal maklum balas antara muka, manakala copyFn menerima teks untuk disalin. Cangkuk ini mengendalikan penulisan tak segerak dan sebarang ralat secara dalaman supaya komponen kekal ringkas.

Di dalam cangkuk tersebut, selepas penyalinan berjaya, tetapkan setCopied(true) dan jadualkan penetapan semula dengan setTimeout(() => setCopied(false), 2000). Simpan ID tamat masa dan padamkannya dalam pembersihan useEffect untuk mengelakkan kemas kini keadaan selepas nyahpasang. Ini mengelakkan amaran “keadaan tidak boleh dikemas kini pada komponen yang telah dinyahpasang”.

Pelayar lama dan halaman bukan HTTPS tidak menyokong API Papan Keratan. Sandaran lama ini mencipta textarea sementara, menetapkan nilainya, menambahkannya pada badan, memanggil document.execCommand('copy'), kemudian membuang elemen tersebut. Pendekatan ini segerak dan berfungsi di mana-mana, walaupun sudah tidak disyorkan.

Sebelum menggunakan API Papan Keratan, semak: navigator.clipboard && typeof navigator.clipboard.writeText === 'function'. Jika tidak tersedia, gunakan pendekatan lama execCommand sebagai sandaran. Semakan pencegahan ini mengelakkan ralat semasa pelaksanaan dalam persekitaran yang tidak menyokong API tersebut.

Pembacaan papan keratan memerlukan kebenaran pengguna melalui API Kebenaran. Anda boleh menanyakan keadaan semasa: navigator.permissions.query({ name: 'clipboard-read' }) mengembalikan PermissionStatus dengan state bernilai granted, denied atau prompt. Pelayar akan meminta kebenaran secara automatik apabila anda memanggil readText().

API Papan Keratan hanya tersedia dalam konteks selamat, iaitu HTTPS atau localhost. Pada halaman HTTP, navigator.clipboard bernilai undefined. Ini ialah sekatan keselamatan kerana kandungan papan keratan mungkin sensitif. Sentiasa semak ketersediaan API sebelum merujuk kaedahnya untuk mengelakkan ralat rujukan null.

jsdom (digunakan oleh Jest) tidak melaksanakan API Papan Keratan. Buat tiruannya dalam persediaan ujian anda: Object.assign(navigator, { clipboard: { writeText: jest.fn().mockResolvedValue(undefined) } }). Ini membolehkan anda menguji bahawa komponen anda memanggil writeText dengan argumen yang betul tanpa persekitaran pelayar sebenar.

Gunakan navigator.clipboard.writeText() dalam pengendali klik untuk menyalin teks. Bina cangkuk useCopyToClipboard yang mengembalikan [copied, copyFn] dengan set semula bermasa. Sentiasa semak ketersediaan API, sediakan sandaran execCommand untuk pelayar lama, dan buat tiruan navigator.clipboard dalam ujian Jest.