如何在React TypeScript中使用SignaturePad

npm install signature_pad @types/signature_pad

import React, { useRef, useEffect } from 'react';
import SignaturePad from 'signature_pad';

const SignaturePadComponent: React.FC = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  let signaturePad: SignaturePad | null = null;

  useEffect(() => {
    if (canvasRef.current) {
      signaturePad = new SignaturePad(canvasRef.current);
    }

    return () => {
      if (signaturePad) {
        signaturePad.off();
        signaturePad = null;
      }
    };
  }, []);

  const clearSignature = () => {
    if (signaturePad) {
      signaturePad.clear();
    }
  };

  const saveSignature = () => {
    if (signaturePad) {
      const signatureData = signaturePad.toDataURL(); // 获取签名数据的Base64编码
      // 在这里可以将签名数据发送到服务器或进行其他操作
    }
  };

  return (
    <div>
      <canvas ref={canvasRef} />
      <button onClick={clearSignature}>Clear</button>
      <button onClick={saveSignature}>Save</button>
    </div>
  );
};

export default SignaturePadComponent;

import React from 'react';
import SignaturePadComponent from './SignaturePadComponent';

const App: React.FC = () => {
  return (
    <div>
      <h1>Signature Pad Example</h1>
      <SignaturePadComponent />
    </div>
  );
};

export default App;