Доступ к дочернему элементу холста из родительского компонента

Question

Я создаю приложение, в котором можно подписать указателем.

Я установил response-canvas-signature .

Теперь мне нужно получить подпись с холста и показать ее как всплывающее окно, а в их файлах Readme сказано, что есть функция toDataURL()

toDataURL (mimetype, encoderOptions): base64string, возвращает изображение подписи в виде URL-адреса данных

Там говорится, что они доступны через API

API
Все методы API требуют ссылки на SignatureCanvas для использования и являются методами экземпляра ссылки. <SignatureCanvas ref={(ref) => { this.sigCanvas = ref }} />

Однако я не могу получить доступ к этой или любой другой функции, описанной там. Я пытался использовать useRef(), createRef(), но все равно ничего. Возможно я просто не делаю это правильно.

Найдите ниже родительский компонент без лишних строк:

import React, { createRef } from 'react';
import ReactCanvas from 'react-signature-canvas';

interface IProps {}

interface IState {}

export default class App extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div className="content-area">
        <ReactCanvas penColor='black' canvasProps={{width: 353, height: 120}} />
      </div>
    );
  }
}

Я попытался создать ссылку, например, private myRef = createRef<ReactCanvas>(), а затем использовать ее

const canvasRef = this.myRef.current
    if (canvasRef) {
      canvasRef.props.toDataURL('image/png', 1);
    }

и там написано

Свойство 'toDataURL' не существует для типа 'Readonly & Readonly <{children ?: ReactNode; }>».

ref в дочернем элементе, как это <ReactCanvas penColor='black' canvasProps={{width: 353, height: 120}} ref={this.myRef} />

Не могли бы вы показать, как я должен это сделать, или даже направление / предложение будут очень благодарны.

Answer 1

Я думаю, вы должны добавить изображение на холст в ComponentDidMount метод

export default class App extends React.Component<IProps, IState> {
  private canvasRef = createRef<ReactCanvas>();
  constructor(props: IProps) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    this.canvasRef.current.toDataURL('image/png', 1);
  }
  render() {
    return (
      <div className="content-area">
        <ReactCanvas
          penColor="black"
          canvasProps={{ width: 353, height: 120 }}
          ref={this.canvasRef}
        />
      </div>
    );
  }
}

И я попробовал на моей локальной машине, и это работает!

Answer 2

Я нашел способ.

Сначала мне нужно было создать пустой объект sigCanvas: any = {}, затем я использую его для создания ссылки в компоненте ReactCanvas <ReactCanvas minWidth={1} maxWidth={2} canvasProps={{width: 353, height: 120}} ref={(ref) => { this.sigPad = ref }} />, а затем я мог бы использовать его в таких функциях, как

getCanvasImage = () => {
    this.setState({toDataUrl: this.sigPad.getTrimmedCanvas()
      .toDataURL('image/png', 1)})
  }