Я хотел бы внедрить систему подписи внутри своей формы, для этого я использую «response-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).