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 状态变量中,可以将其发送到后端保存签名图片。