Как использовать SignaturePad с React TypeScript

Я пытаюсь внедрить SignaturePad в свой проект реагирования и могу нарисовать подпись, но не могу получить доступ к свойствам, чтобы очистить или сохранить ее. Я получаю ошибку ниже на ref = {signCanvas}, а также на current.clear() и signCanvas.current.clear() и signCanvas.getTrimmedCanvas().toDataURL("image/png")

Никакая перегрузка не соответствует этому вызову.

  Overload 1 of 2, '(props: Readonly<ReactSignatureCanvasProps>): ReactSignatureCanvas', gave the following error.
    Type 'MutableRefObject<{}>' is not assignable to type 'string | ((instance: ReactSignatureCanvas | null) => void) | RefObject<ReactSignatureCanvas> | null | undefined'.
      Type 'MutableRefObject<{}>' is not assignable to type 'RefObject<ReactSignatureCanvas>'.
        Types of property 'current' are incompatible.
          Type '{}' is missing the following properties from type 'ReactSignatureCanvas': on, off, clear, isEmpty, and 14 more.
  Overload 2 of 2, '(props: ReactSignatureCanvasProps, context?: any): ReactSignatureCanvas', gave the following error.
    Type 'MutableRefObject<{}>' is not assignable to type 'string | ((instance: ReactSignatureCanvas | null) => void) | RefObject<ReactSignatureCanvas> | null | undefined'.
      Type 'MutableRefObject<{}>' is not assignable to type 'RefObject<ReactSignatureCanvas>'.ts(2769)
index.d.ts(143, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactSignatureCanvas> & Readonly<ReactSignatureCanvasProps> & Readonly<...>'
index.d.ts(143, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactSignatureCanvas> & Readonly<ReactSignatureCanvasProps> & Readonly<...>'*

Это то, что я реализовал до сих пор, любая помощь будет очень признательна.

const signCanvas = useRef({});

const clear = () => signCanvas.current.clear();
const save = () => console.info(signCanvas.getTrimmedCanvas().toDataURL("image/png"));

<SignaturePad
 ref = {signCanvas}
 canvasProps = {{ className: "signature__canvas" }}
/>

<Button color='grey' content='Clear' onClick = {clear} />
<Button color='grey' content='Save' onClick = {save} />
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
0
1 729
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Мне удалось это исправить. Если у кого-то такая же проблема, просто нужно добавить ниже для React.MutableRefObject

const signCanvas = React.useRef() as React.MutableRefObject<any>;

и теперь все работает нормально.

 const clear = () => signCanvas.current.clear();

 const save = () =>
 console.info(signCanvas.current.getTrimmedCanvas().toDataURL("image/png"));

хорошее исправление, чтобы еще больше сузить тип?

VibrationPositive 18.08.2022 19:10

Вы можете использовать правильный тип, вам нужно установить: @types/react-signature-canvas, а затем использовать ReactSignatureCanvas вместо любого.

Virako 10.12.2022 23:40

Другие вопросы по теме