reactjs - 如何使用 useRef 保留 react 签名

Question

我正在使用react-signature-canvas作为签名板，但在我关闭并重新打开模式后签名消失。有没有可能的方法在关闭后保留模式上的签名？

我尝试在更高的组件上初始化 useRef() 并传递给 Modal 组件

预期行为

模式关闭时保留的签名

我创建了this live running example来说明问题:

对此问题有任何反馈吗？

Answer 1

您只需要在保存时存储签名数据。并在handleClickOpen上设置SignaturePad的初始状态。像这样的事情

  const [pointsArray, setPointsArray] = React.useState(null);
  const save = () => {
    setPointsArray(sigCanvas.current.toData());
    setImageURL(sigCanvas.current.getTrimmedCanvas().toDataURL("image/png"));
  };
  const handleClickOpen = () => {
    setOpen(true);
    setTimeout(() => {
      if (pointsArray) {
        sigCanvas.current.fromData(pointsArray);
      }
    });
  };