Question

我想在表单中实现签名系统，为此我使用了“ react-signature-canvas”。不幸的是，当我尝试使用它时，出现了一些问题。

我的主要问题是重新加载我的页面。通常在React中，当您更新某些内容时，只需更改渲染而无需重新加载。但是在这里呢...它是否链接到画布系统？我不想重新加载我的页面...对于PWA来说太丑了。例如，当我单击“清除”或“修剪”时，页面将重新加载。

这是我的代码：为了清楚起见，我删除了部分代码

const Consultation4 = () => {
    const sigPad = {}
    const [trimmedDataUrl,setTrimmedDataUrl] =  useState(null);

    const clear = () => sigPad.clear();
    const trim = () => {
        setTrimmedDataUrl(sigPad.getTrimmedCanvas().toDataURL('image/png'));
    }
 ...
(In the render)
    <FormGroup tag="fieldset" className="form-group">
       <div className="container">
          <div className="row">
             <div className="col-4 margin-left--12px">
                 <legend>Please sign here:</legend>
             </div>
             <div className="col-4 margin-button-clear">
                <button onClick={clear} className="btn btn-outline-secondary btn-sm">Clear</button>
             </div>
             <div className="col-4 margin-button-clear">
                <button onClick={trim} className="btn btn-outline-secondary btn-sm">Trim</button>
             </div>
          </div>
       </div>

       <div className='border_grey'>
          <SignaturePad ref={sigPad} />
       </div>
   </FormGroup>
   {trimmedDataUrl ? <img src={trimmedDataUrl}/> : null}
}

能帮我吗？预先感谢

PS：还有第二个小问题，当我尝试使用sigPad.isEmpty()时，编译器说“ 该方法不存在”。但是它存在于签名板画布（https://www.npmjs.com/package/react-signature-canvas）的文档中。

Answer 1

按钮元素的默认类型为submit。尝试按钮标签，例如

<button type="button" ....

在表格中停止向他们提交。文本输入元素也可能需要注意，也要停止按enter来提交表单。

为什么画布更新会重新加载页面？反应

1 个答案: