react 手写签名

import React, { useRef, useState } from 'react';
import SignatureCanvas from 'react-signature-canvas';
import './index.less';
function Signature() {
  const [signatureDataUrl, setSignatureDataUrl] = useState(null);
  const signatureRef: any = useRef();

  const handleClear = () => {
    signatureRef.current.clear();
    setSignatureDataUrl(null);
  };

  const handleSave = () => {
    const dataURL = signatureRef.current.toDataURL();
    console.log('dataURL', dataURL);
    setSignatureDataUrl(dataURL);
  };

  return (
    <div>
      <SignatureCanvas
        canvasProps={{
          width: 350,
          height: 200,
          className: 'write-name-canvas'
        }}
        ref={signatureRef}
      />
      <button onClick={handleClear}>清除</button>
      <button onClick={handleSave}>保存</button>
      {signatureDataUrl && (
        <img
          src={signatureDataUrl}
          alt="签名"
          style={{ border: '1px solid red', width: '100px', height: '35px' }}
        />
      )}
    </div>
  );
}
export default Signature;