javascript - 为什么 Canvas 更新会重新加载页面？ react

Question

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

我的主要问题是重新加载我的页面。通常在 React 中，当你更新某些内容时，只是渲染发生变化而无需重新加载。但在这里它确实......它与 Canvas 系统链接吗？我不想重新加载我的页面...对于 PWA 来说这太丑了。 例如，当我单击“清除”或“trim ”时，页面会重新加载。

这是我的代码:为了更清晰，我删除了其中的一些部分

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() 时，编译器说“此方法不存在”。但它存在于signature-pad-canvas ( https://www.npmjs.com/package/react-signature-canvas ) 的文档中。

Answer 1

按钮元素的默认类型是提交。尝试像

这样的按钮标签

<button type="button" ....

在表单中阻止他们提交。文本输入元素可能还需要注意停止按 enter 提交表单。