React实现在移动端进行签字

React实现在移动端进行签字

要实现在移动端进行签字，可以使用React组件 react-signature-canvas，它是一个开源的React库，可以在移动设备上进行签字。
首先，安装 react-signature-canvas 库：npm install react-signature-canvas然后，在需要使用签名组件的React组件中，导入 react-signature-canvas 并创建一个 SignatureCanvas 组件。
当使用React的函数式组件时，可以使用 useRef 和 useState 钩子来创建签名组件和保存签名数据的状态。下面是一个函数式组件的示例代码：

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

function Signature() {
  const [signatureDataUrl, setSignatureDataUrl] = useState(null);
  const signatureRef = useRef();

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

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

  return (
    <div>
      <SignatureCanvas ref={signatureRef} />
      <button onClick={handleClear}>清除</button>
      <button onClick={handleSave}>保存</button>
      {signatureDataUrl && (
        <img src={signatureDataUrl} alt="签名" style={{ maxWidth: '50vw', height: '40vh' }} />
      )}
    </div>
  );
}
export default Signature

这里使用了 useState 钩子来创建了一个名为 signatureDataUrl 的状态变量，用于保存签名数据的base64编码。在 handleClear 和 handleSave 函数中，除了清除签名和保存签名的操作外，还使用了 setSignatureDataUrl 函数来更新签名数据的状态变量。
在 return 中，根据签名数据是否存在来决定是否显示签名图片。如果签名数据存在，就渲染一个 img 元素来显示签名图片。
这样，就可以在函数式组件中使用这个 Signature 组件进行签字了。在用户签名后，签名数据的base64编码会被保存到 signatureDataUrl 状态变量中，可以将其发送到后端保存签名图片。