reactjs 类型“{}”上不存在属性“getTrimmedCanvas”,ts(2339),签名板

mqkwyuun  于 2022-12-03  发布在  React
关注(0)|答案(3)|浏览(121)

我试图在我的应用程序中实现一个函数,这样用户就可以签署PDF文件。我在CodeSandbox上找到了一个签名板的示例,我试图将其插入到我的项目中,但我得到了2个错误,称为:

Property 'getTrimmedCanvas' does not exist on type '{}'.ts(2339)

Property 'clear' does not exist on type '{}'.ts(2339)

Codesource Signature Pad example

与错误一致

import Popup from "reactjs-popup";
import SignaturePad from "react-signature-canvas";
import { useState, useRef } from "react";
import React from "react";

function Button() {
  const sigCanvas = useRef({});
  const [imageURL, setImageURL] = useState(null);
  const clear = () => sigCanvas.current.clear();
  const save = () =>setImageURL(sigCanvas.current.getTrimmedCanvas().toDataURL("image/png"));

  return (

//for more Code use the Link: Codesource Signature Pad example

  );
}

export default Button;

我已经安装了这两个库:

npm install --save reactjs-popup
npm install --save react-signature-canvas

知道怎么修吗?谢谢

fnvucqvd

fnvucqvd1#

我在useRef中添加一个类型来解决这个问题:

const sigCanvas = useRef<any>();
f4t66c6m

f4t66c6m2#

非常简单,您使用的是.tsx文件,这是导致问题的原因。只要将文件类型从tsx更改为.js或.jsx,它就会正常工作:)

hrysbysz

hrysbysz3#

我刚刚使用了react-signature-canvas,这对我很有效
在package.json上

"@types/react-signature-canvas": "^1.0.2",
"react-signature-canvas": "^1.0.6",

在组件上

import React, { useRef } from 'react';
import SignatureCanvas from 'react-signature-canvas';

const signaturePadRef: React.MutableRefObject<SignatureCanvas> = useRef(null);

return (
    <SignatureCanvas
      ref={(ref) => {
        signaturePadRef.current = ref;
      }}
    />
  );

相关问题