OnClick tidak berfungsi dalam React JS pada mudah alih
<p>Apabila mengesahkan tandatangan (lihat video demo), onClick tidak menyalakan fungsi onSet() pada tablet/peranti mudah alih, tetapi berfungsi pada komputer.
Pada tablet/mudah alih, onClick hanya berfungsi di luar butang. </p>
<p>Saya mahu fungsi onClick dicetuskan pada tablet/peranti mudah alih. </p>
<p>Video demo: https://streamable.com/lujzg0</p>
<p>Projek: https://hh8n2j.csb.app/ (Kotak Pasir)</p>
<p><strong>DraggableSignature: </strong>
<pre class="brush:js;toolbar:false;">
//DraggableSignature.js
import Boleh Seret daripada "boleh seret bertindak balas";
import { FaCheck, FaTimes } daripada "react-icons/fa";
import { errorColor, goodColor, primary45 } daripada "../utils/colors";
eksport fungsi lalai DraggableSignature({ url, onEnd, onSet, onCancel }) {
gaya const = {
bekas: {
kedudukan: "mutlak",
zIndex: 100000,
sempadan: `2px pepejal ${primary45}`,
},
kawalan: {
kedudukan: "mutlak",
kanan: 0,
paparan: "blok sebaris",
Warna latar belakang: primary45,
// jejari sempadan: 4,
},
Butang kecil: {
paparan: "blok sebaris",
kursor: "penunjuk",
pelapik: 4,
},
};
kembali (
<Draggable onStop={onEnd}>
<div style={styles.container}>
<div style={styles.controls}>
<button style={styles.smallbutton} onClick={onSet}>
<FaCheck color={goodColor} />
</butang>
<gaya butang={styles.smallbutton} onClick={onCancel}>
<Warna FaTimes={errorColor} />
</butang>
</div>
<img
alt="tandatangan"
src={url}
lebar={200}
style={styles.img}
boleh diseret={false}
/>
</div>
</Draggable>
);
}</pre>
<strong>App.js：</strong><p><br /></p>
<pre class="brush:js;toolbar:false;">{signatureURL ? (
<DraggableSignature
url={signatureURL}
onCancel={() => {
setSignatureURL(null);
}}
onSet={async () => {
const { originalHeight, originalWidth } = pageDetails;
skala const =
originalWidth / documentRef.current.clientWidth;
const y =
documentRef.current.clientHeight -
(kedudukan.y -
kedudukan.offsetY +
64 -
documentRef.current.offsetTop);
const x =
kedudukan.x -
160 -
position.offsetX -
documentRef.current.offsetLeft;
// XY baharu berhubung dengan saiz dokumen sebenar
const newY =
(y * originalHeight) / documentRef.current.clientHeight;
const newX =
(x * originalWidth) / documentRef.current.clientWidth;
const pdfDoc = tunggu PDFDocument.load(pdf);
halaman const = pdfDoc.getPages();
const firstPage = pages[pageNum];
const pngImage = tunggu pdfDoc.embedPng(signatureURL);
const pngDims = pngImage.scale(skala * 0.3);
firstPage.drawImage(pngImage, {
x: baruX,
y: baruY,
lebar: pngDims.width,
ketinggian: pngDims.height,
});
if (autoDate) {
firstPage.drawText(
`Signé électroniquement le :${dayjs().format(
"DD/MM/YYYY à HH:mm:ss"
)}`,
{
x: baruX,
y: baruY - 10,
saiz: 14 * skala,
warna: rgb(0.074, 0.545, 0.262),
}
);
}
const pdfBytes = tunggu pdfDoc.save();
const blob = new Blob([newUint8Array(pdfBytes)]);
const URL = tunggu blobToURL(blob);
setPdf(URL);
setPosition(null);
setSignatureURL(null);
}}
onEnd={setPosition}
/>
): null}</pra>
<p>Terima kasih</p>
<p>Saya menukar onClick kepada onTouchtart, saya menukar kedudukan butang, saya menggunakan perpustakaan CSS yang lain. </p>
