抱歉,我不能非常具体地说明问题的细节,因为它有时会发生,而且我无法重新创建它,这意味着我不知道从哪里开始尝试修复它。
它似乎只发生在非常便宜的安卓平板电脑上。
我有一个带有表单的页面,用户可以在其中填写详细信息,问题发生在他们将姓名输入文本字段之后,然后一旦他们按下 react-signature-canvas
开始绘图他们的签名应用程序崩溃(不会一直崩溃)。
在过去,我认为当用户尝试在签名板上开始绘图时键盘仍然打开时导致崩溃。
正如我所说,我发现它真的很难修复,因为我无法重新创建它,所以任何帮助都将不胜感激。 我正在使用 React Hooks 和 Formik。
表格:
<h2>Guardian Full Name</h2>
<MyTextField
label="Guardian Full Name"
name="parentName"
required
/>
<ErrorMessage
component={"div"}
className={"termsConditionText error"}
name={"parentSignature"}
/>
<SignaturePad setFieldValue={setFieldValue} />
签名板:
import React, { useRef, useState } from "react";
import { Button } from "semantic-ui-react";
import "../../pages/SignDisclaimerForm/SignDisclaimerForm.css";
import "./signaturePad.css";
import SignatureCanvas from "react-signature-canvas";
export const SignaturePad = props => {
const [canvasImageUrl, setCanvasImageUrl] = useState([
props.parentSignature || ""
]);
let sigCanvas = useRef();
const clearCanvas = () => sigCanvas.current.clear();
const saveCanvas = async () => {
if (sigCanvas.current.isEmpty()) return;
document.getElementById("parentName").blur();
props.setFieldValue(
"parentSignature",
sigCanvas.current.getTrimmedCanvas().toDataURL("image/png")
);
setCanvasImageUrl(
sigCanvas.current.getTrimmedCanvas().toDataURL("image/png")
);
};
return (
<div>
{!props.disabled && (
<div>
<h2 style={{ marginLeft: "5%" }}>Guardian Signature</h2>
<div className={"sigContainer"}>
<SignatureCanvas
ref={sigCanvas}
canvasProps={{ className: "sigPad" }}
onEnd={saveCanvas}
/>
</div>
<Button
style={{ marginLeft: "5%", marginTop: "2%", marginRight: "2%" }}
type={"button"}
onClick={clearCanvas}
children={"Clear"}
/>
<br />
<br />
</div>
)}
{canvasImageUrl[0] && (
<div className={"signatureDisplay"}>
<img
src={canvasImageUrl}
alt={"Guardian Signature"}
style={{ height: "100%", width: "100%" }}
/>
</div>
)}
</div>
);
};
哨兵问题报告也在下面。
问题标题:
TypeError HTMLCanvasElement.r(src/helpers)
error
Cannot read property 'push' of undefined
问题正文:
../../src/helpers.ts 在 HTMLCanvasElement.r 的第 85:17 行
}
// Attempt to invoke user-land function
// NOTE: If you are a Sentry user, and you are seeing this stack frame, it
// means the sentry.javascript SDK caught an error invoking your application code. This
// is expected behavior and NOT indicative of a bug with sentry.javascript.
return fn.apply(this, wrappedArguments);
// tslint:enable:no-unsafe-any
} catch (ex) {
ignoreNextOnError();
withScope((scope: Scope) => {
面包屑:
这是表单的样子:
最佳答案
Formik 作者在这里...
您可能正在从未安装的 DOM 元素( Canvas )设置状态。它不会一直发生,因为它是一种竞争条件。在回调中使用方法之前,您应该检查 Canvas ref
是否实际安装。
// ...
const sigCanvas = useRef(null);
const clearCanvas = () => {
if (sigCanvas.current != null) {
sigCanvas.current.clear();
}
};
const saveCanvas = async () => {
// Ensure that the canvas is mounted before using it
if (sigCanvas.current != null) {
if (sigCanvas.current.isEmpty()) return;
document.getElementById("parentName").blur();
props.setFieldValue(
"parentSignature",
sigCanvas.current.getTrimmedCanvas().toDataURL("image/png")
);
setCanvasImageUrl(
sigCanvas.current.getTrimmedCanvas().toDataURL("image/png")
);
}
};
// ...
关于html - React App 在打开 react-signature-canvas 时有时会崩溃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63452820/