在移动设备上，OnClick在React JS中不起作用
<p>在验证签名时（请参阅演示视频），在平板电脑/移动设备上，onClick不会触发onSet()函数，但在计算机上有效。
在平板电脑/移动设备上，onClick仅在按钮外部有效。</p>
<p>我希望在平板电脑/移动设备上，onClick能够触发函数。</p>
<p>演示视频：https://streamable.com/lujzg0</p>
<p>项目：https://hh8n2j.csb.app/（沙盒）</p>
<p><strong>DraggableSignature：</strong> </p>
<pre class="brush:js;toolbar:false;">
//DraggableSignature.js
import Draggable from "react-draggable";
import { FaCheck, FaTimes } from "react-icons/fa";
import { errorColor, goodColor, primary45 } from "../utils/colors";
export default function DraggableSignature({ url, onEnd, onSet, onCancel }) {
const styles = {
container: {
position: "absolute",
zIndex: 100000,
border: `2px solid ${primary45}`,
},
controls: {
position: "absolute",
right: 0,
display: "inline-block",
backgroundColor: primary45,
// borderRadius: 4,
},
smallButton: {
display: "inline-block",
cursor: "pointer",
padding: 4,
},
};
return (
<Draggable onStop={onEnd}>
<div style={styles.container}>
<div style={styles.controls}>
<button style={styles.smallbutton} onClick={onSet}>
<FaCheck color={goodColor} />
</button>
<button style={styles.smallbutton} onClick={onCancel}>
<FaTimes color={errorColor} />
</button>
</div>
<img
alt="signature"
src={url}
width={200}
style={styles.img}
draggable={false}
/>
</div>
</可拖动>
）；
}</pre>
<strong>App.js：</strong><p><br /></p>
{signatureURL ? （
<可拖动签名
url={签名URL}
onCancel={() =>; {
setSignatureURL(空);
}}
onSet={async()=>; {
const { 原始高度, 原始宽度 } = 页面详细信息;
常量尺度 =
原始宽度 / documentRef.current.clientWidth;
常量 y =
documentRef.current.clientHeight -
（位置.y -
位置.offsetY +
64 -
documentRef.current.offsetTop);
常量 x =
位置.x -
160 -
位置.offsetX -
documentRef.current.offsetLeft;
// 相对于实际文档大小的新 XY
常量新Y =
(y * 原始高度) / documentRef.current.clientHeight;
常量新X =
(x * 原始宽度) / documentRef.current.clientWidth;
const pdfDoc = 等待 PDFDocument.load(pdf);
const 页面 = pdfDoc.getPages();
const 第一页 = 页数[页数];
const pngImage = 等待 pdfDoc.embedPng(signatureURL);
const pngDims = pngImage.scale(scale * 0.3);
第一页.drawImage(pngImage, {
x：新X，
y：新Y，
宽度：pngDims.width，
高度：pngDims.height，
});
如果（自动日期）{
第一页.drawText(
`电子签名：${dayjs().format(
“日/月/年 à HH:mm:ss”
)}`,
{
x：新X，
y：新Y - 10，
尺寸：14 * 比例，
颜色：RGB（0.074，0.545，0.262），
}
）；
}
const pdfBytes = 等待 pdfDoc.save();
const blob = new Blob([newUint8Array(pdfBytes)]);
const URL = 等待 blobToURL(blob);
设置Pdf（网址）；
设置位置（空）；
setSignatureURL(空);
}}
onEnd={设置位置}
>>
） ： 无效的}</pre>
<p>谢谢</p>
<p>我将onClick更改为onTouchtart，我更改了按钮位置，我使用了另一个CSS库。</p>
