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

【问题标题】：Why a canvas update reload the page ? React为什么画布更新会重新加载页面？反应
【发布时间】：2019-10-30 22:44:30
【问题描述】：

我想在我的表单中实现一个签名系统，为此我使用“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() 时，编译器说“此方法不存在”。但它存在于 signature-pad-canvas (https://www.npmjs.com/package/react-signature-canvas) 的文档中。

【问题讨论】：

标签： javascript reactjs canvas

【解决方案1】：

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

这样的按钮标签

<button type="button" ....

在表格内停止提交。文本输入元素可能还需要注意停止按enter 提交表单。

【讨论】：